<template>
  <view class="wrap">
    <view class="healthWrap">
      <view class="listWrap" v-if="state.healthList.bmi">
        <view class="header">
          <icon type="" class="iconfont icon-BMIluru1 left" style="color: #4bddbe" />
          <view class="right">
            <view class="top cf">
              <text class="name">BMI</text>
              <!-- green    yellow   red   orange  -->
              <text
                v-if="state.healthList && state.healthList.bmi && state.healthList.bmi.normalFlag"
                :class="['status', state.healthList.bmi.color ? state.healthList.bmi.color : 'red']"
                >{{ state.healthList.bmi.normalFlagName }}</text
              >
              <text class="time">{{
                state.healthList.bmi.collectTime
                  ? parseTime(
                      new Date(state.healthList.bmi.collectTime.replace(/\-/g, '/')).getTime(),
                      '{y}-{m}-{d} {h}:{i}'
                    ).replace(/\//g, '-')
                  : ''
              }}</text>
            </view>
            <view class="min">
              <view class="num">
                <text class="name" v-if="state.healthList.bmi.itemValue">{{
                  state.healthList.bmi.itemValue
                }}</text>
                <text class="nodata" v-else>-</text>
                <text class="unit" v-if="state.healthList.bmi.itemValue">kg/㎡</text>
              </view>
              <!-- <view class="unit">mmHg</view> -->
              <icon type="" @tap="add('BMI')" class="iconfont icon-zengjia-11 add" />
            </view>
          </view>
        </view>
        <view class="checkMore">
          <view class="item" @tap="knowFun('BMI')">
            <text class="name">了解</text>
            <text class="quota">BMI</text>
            <img
              class="img"
              src="https://ainengli.meilianshuke.com/jkhx/common/my-arrow-right.png"
              alt=""
            />
            <text class="border" />
          </view>
          <view class="item" @tap="detailFun('BMI')">
            <text class="name">查看详情</text>
            <img
              class="img"
              src="https://ainengli.meilianshuke.com/jkhx/common/my-arrow-right.png"
              alt=""
            />
          </view>
        </view>
      </view>
      <view class="listWrap" v-if="state.healthList.whr">
        <view class="header">
          <icon type="" class="iconfont icon-yaotunbiluru1 left" style="color: #857bff" />
          <view class="right">
            <view class="top cf">
              <text class="name">腰臀比</text>
              <text
                v-if="state.healthList && state.healthList.whr && state.healthList.whr.normalFlag"
                :class="['status', state.healthList.whr.color ? state.healthList.whr.color : 'red']"
                >{{ state.healthList.whr.normalFlagName }}</text
              >
              <text class="time">
                {{
                  state.healthList.whr.collectTime
                    ? parseTime(
                        new Date(state.healthList.whr.collectTime.replace(/\-/g, '/')).getTime(),
                        '{y}-{m}-{d} {h}:{i}'
                      ).replace(/\//g, '-')
                    : ''
                }}
              </text>
            </view>
            <view class="min">
              <view class="num">
                <text class="name" v-if="state.healthList.whr.itemValue">{{
                  state.healthList.whr.itemValue
                }}</text>
                <text class="nodata" v-else>-</text>
              </view>
              <icon type="" @tap="add('whr')" class="iconfont icon-zengjia-11 add" />
            </view>
          </view>
        </view>
        <view class="checkMore">
          <view class="item" @tap="knowFun('whr')">
            <text class="name">了解</text>
            <text class="quota">腰臀比</text>
            <img
              class="img"
              src="https://ainengli.meilianshuke.com/jkhx/common/my-arrow-right.png"
              alt=""
            />
            <text class="border" />
          </view>
          <view class="item" @tap="detailFun('whr')">
            <text class="name">查看详情</text>
            <img
              class="img"
              src="https://ainengli.meilianshuke.com/jkhx/common/my-arrow-right.png"
              alt=""
            />
          </view>
        </view>
      </view>
      <view class="listWrap" v-if="state.healthList.dbp">
        <view class="header">
          <icon type="" class="iconfont icon-xieyaluru1 left" style="color: #ffa24d" />
          <view class="right">
            <view class="top cf">
              <text class="name">血压</text>
              <text
                v-if="state.healthList && state.healthList.sbp && state.healthList.sbp.normalFlag"
                :class="[
                  'status',
                  state.healthList.sbp.normalFlag == 'N' && state.healthList.dbp.normalFlag == 'N'
                    ? 'green'
                    : 'red'
                ]"
                >{{
                  state.healthList.sbp.normalFlag == 'N' && state.healthList.dbp.normalFlag == 'N'
                    ? '正常'
                    : state.healthList.sbp.normalFlag == null &&
                      state.healthList.dbp.normalFlag == null
                    ? ''
                    : '异常'
                }}</text
              >
              <text class="time">
                {{
                  state.healthList.sbp.collectTime
                    ? parseTime(
                        new Date(state.healthList.sbp.collectTime.replace(/\-/g, '/')).getTime(),
                        '{y}-{m}-{d} {h}:{i}'
                      ).replace(/\//g, '-')
                    : ''
                }}
              </text>
            </view>
            <view class="min">
              <view class="num">
                <text
                  class="nodata"
                  v-if="!state.healthList.sbp.itemValue && !state.healthList.dbp.itemValue"
                  >-</text
                >
                <text class="name" v-else
                  >{{ Math.round(Number(state.healthList.sbp.itemValue)) }} /
                  {{ Math.round(Number(state.healthList.dbp.itemValue)) }}</text
                >
                <text
                  class="unit"
                  v-if="state.healthList.sbp.itemValue || state.healthList.dbp.itemValue"
                  >mmHg</text
                >
              </view>
              <icon type="" @tap="add('blood_pressure')" class="iconfont icon-zengjia-11 add" />
            </view>
          </view>
        </view>
        <view class="checkMore">
          <view class="item" @tap="knowFun('blood_pressure')">
            <text class="name">了解</text>
            <text class="quota">血压</text>
            <img
              class="img"
              src="https://ainengli.meilianshuke.com/jkhx/common/my-arrow-right.png"
              alt=""
            />
            <text class="border" />
          </view>
          <view class="item" @tap="detailFun('blood_pressure')">
            <text class="name">查看详情</text>
            <img
              class="img"
              src="https://ainengli.meilianshuke.com/jkhx/common/my-arrow-right.png"
              alt=""
            />
          </view>
        </view>
      </view>
      <view class="listWrap" v-if="state.healthList.heartRate">
        <view class="header">
          <icon type="" class="iconfont icon-xinshuailuru1 left" style="color: #5383fe" />
          <view class="right">
            <view class="top cf">
              <text class="name">心率</text>
              <text
                v-if="
                  state.healthList &&
                  state.healthList.heartRate &&
                  state.healthList.heartRate.normalFlag
                "
                :class="[
                  'status',
                  state.healthList.heartRate.color ? state.healthList.heartRate.color : 'red'
                ]"
                >{{ state.healthList.heartRate.normalFlagName }}</text
              >
              <text class="time">
                {{
                  state.healthList.heartRate.collectTime
                    ? parseTime(
                        new Date(
                          state.healthList.heartRate.collectTime.replace(/\-/g, '/')
                        ).getTime(),
                        '{y}-{m}-{d} {h}:{i}'
                      ).replace(/\//g, '-')
                    : ''
                }}
              </text>
            </view>
            <view class="min">
              <view class="num">
                <text class="name" v-if="state.healthList.heartRate.itemValue">{{
                  Math.round(Number(state.healthList.heartRate.itemValue))
                }}</text>
                <text class="nodata" v-else>-</text>
                <text class="unit" v-if="state.healthList.heartRate.itemValue">次/分</text>
              </view>
              <icon type="" @tap="add('heart')" class="iconfont icon-zengjia-11 add" />
            </view>
          </view>
        </view>
        <view class="checkMore">
          <view class="item" @tap="knowFun('heart')">
            <text class="name">了解</text>
            <text class="quota">心率</text>
            <img
              class="img"
              src="https://ainengli.meilianshuke.com/jkhx/common/my-arrow-right.png"
              alt=""
            />
            <text class="border" />
          </view>
          <view class="item" @tap="detailFun('heart')">
            <text class="name">查看详情</text>
            <img
              class="img"
              src="https://ainengli.meilianshuke.com/jkhx/common/my-arrow-right.png"
              alt=""
            />
          </view>
        </view>
      </view>
      <view class="listWrap">
        <view class="header">
          <icon type="" class="iconfont icon-xietangluru1 left" style="color: #ff766d" />
          <view class="right">
            <view class="top cf">
              <text class="name">血糖</text>
              <text
                v-if="
                  state.healthList &&
                  state.healthList.blood_sugar &&
                  state.healthList.blood_sugar.normalFlag
                "
                :class="[
                  'status',
                  state.healthList.blood_sugar.color ? state.healthList.blood_sugar.color : 'red'
                ]"
                >{{ state.healthList.blood_sugar.normalFlagName }}</text
              >
              <text class="time">
                {{
                  state.healthList.blood_sugar && state.healthList.blood_sugar.collectTime
                    ? parseTime(
                        new Date(
                          state.healthList.blood_sugar.collectTime.replace(/\-/g, '/')
                        ).getTime(),
                        '{y}-{m}-{d} {h}:{i}'
                      ).replace(/\//g, '-')
                    : ''
                }}
              </text>
            </view>
            <view class="min">
              <view class="num">
                <text
                  class="name"
                  v-if="state.healthList.blood_sugar && state.healthList.blood_sugar.indicatorList"
                >
                  {{
                    state.healthList.blood_sugar.indicatorList[0]
                      ? state.healthList.blood_sugar.indicatorList[0].indicatorValue
                      : '-'
                  }}
                </text>
                <text class="nodata" v-else>-</text>
                <text
                  class="unit"
                  v-if="state.healthList.blood_sugar && state.healthList.blood_sugar.indicatorList"
                  >mmol/L</text
                >
                <text
                  class="postprandial"
                  v-if="state.healthList.blood_sugar && state.healthList.blood_sugar.indicatorList"
                  >{{ state.healthList.blood_sugar.indicatorList[0].indicatorName }}</text
                >
              </view>
              <icon type="" @tap="add('blood_sugar')" class="iconfont icon-zengjia-11 add" />
            </view>
          </view>
        </view>
        <view class="checkMore">
          <view class="item" @tap="knowFun('blood_sugar')">
            <text class="name">了解</text>
            <text class="quota">血糖</text>
            <img
              class="img"
              src="https://ainengli.meilianshuke.com/jkhx/common/my-arrow-right.png"
              alt=""
            />
            <text class="border" />
          </view>
          <view class="item" @tap="detailFun('blood_sugar')">
            <text class="name">查看详情</text>
            <img
              class="img"
              src="https://ainengli.meilianshuke.com/jkhx/common/my-arrow-right.png"
              alt=""
            />
          </view>
        </view>
      </view>
      <!-- <view
        class="listWrap"
        v-if="state.healthList.pbg && state.healthList.fbg && !state.healthList.fbg.itemValue"
      >
        <view class="header">
          <icon type="" class="iconfont icon-xietangluru1 left" style="color: #ff766d" />
          <view class="right">
            <view class="top cf">
              <text class="name">血糖</text>
              <text
                v-if="state.healthList && state.healthList.pbg && state.healthList.pbg.normalFlag"
                :class="['status', state.healthList.pbg.color ? state.healthList.pbg.color : 'red']"
                >{{ state.healthList.pbg.normalFlagName }}</text
              >
              <text class="time">
                {{
                  state.healthList.pbg.collectTime
                    ? parseTime(
                        new Date(state.healthList.pbg.collectTime.replace(/\-/g, '/')).getTime(),
                        '{y}-{m}-{d} {h}:{i}'
                      ).replace(/\//g, '-')
                    : ''
                }}
              </text>
            </view>
            <view class="min">
              <view class="num">
                <text class="name" v-if="state.healthList.pbg.itemValue">{{
                  state.healthList.pbg.itemValue ? state.healthList.pbg.itemValue : '-'
                }}</text>
                <text class="nodata" v-else>-</text>
                <text class="unit" v-if="state.healthList.pbg.itemValue">mmol/L</text>
                <text class="postprandial" v-if="state.healthList.pbg.itemValue">{{
                  state.healthList.pbg.itemValue ? '餐后' : ''
                }}</text>
              </view>
              <icon type="" @tap="add('blood_sugar')" class="iconfont icon-zengjia-11 add" />
            </view>
          </view>
        </view>
        <view class="checkMore">
          <view class="item" @tap="knowFun('blood_sugar')">
            <text class="name">了解</text>
            <text class="quota">血糖</text>
            <img class="img" src="https://ainengli.meilianshuke.com/jkhx/common/my-arrow-right.png" alt="" />
            <text class="border" />
          </view>
          <view class="item" @tap="detailFun('blood_sugar')">
            <text class="name">查看详情</text>
            <img class="img" src="https://ainengli.meilianshuke.com/jkhx/common/my-arrow-right.png" alt="" />
          </view>
        </view>
      </view> -->
      <view class="listWrap" v-if="state.healthList.spo2">
        <view class="header">
          <icon type="" class="iconfont icon-xieyangluru1 left" style="color: #41a4ff" />
          <view class="right">
            <view class="top cf">
              <text class="name">血氧</text>
              <text
                v-if="state.healthList && state.healthList.spo2 && state.healthList.spo2.normalFlag"
                :class="[
                  'status',
                  state.healthList.spo2.color ? state.healthList.spo2.color : 'red'
                ]"
                >{{ state.healthList.spo2.normalFlagName }}</text
              >
              <text class="time">
                {{
                  state.healthList.spo2.collectTime
                    ? parseTime(
                        new Date(state.healthList.spo2.collectTime.replace(/\-/g, '/')).getTime(),
                        '{y}-{m}-{d} {h}:{i}'
                      ).replace(/\//g, '-')
                    : ''
                }}
              </text>
            </view>
            <view class="min">
              <view class="num">
                <text class="name" v-if="state.healthList.spo2.itemValue">{{
                  state.healthList.spo2.itemValue
                }}</text>
                <text class="nodata" v-else>-</text>
                <text class="unit" v-if="state.healthList.spo2.itemValue">%</text>
              </view>
              <icon type="" @tap="add('blood_oxygen')" class="iconfont icon-zengjia-11 add" />
            </view>
          </view>
        </view>
        <view class="checkMore">
          <view class="item" @tap="knowFun('blood_oxygen')">
            <text class="name">了解</text>
            <text class="quota">血氧</text>
            <img
              class="img"
              src="https://ainengli.meilianshuke.com/jkhx/common/my-arrow-right.png"
              alt=""
            />
            <text class="border" />
          </view>
          <view class="item" @tap="detailFun('blood_oxygen')">
            <text class="name">查看详情</text>
            <img
              class="img"
              src="https://ainengli.meilianshuke.com/jkhx/common/my-arrow-right.png"
              alt=""
            />
          </view>
        </view>
      </view>
      <!-- add -->
      <view class="listWrap">
        <view class="header">
          <icon type="" class="iconfont icon-xietongluru left" style="color: #857bff" />
          <view class="right">
            <view class="top cf">
              <text class="name">血酮</text>
              <text
                v-if="
                  state.healthList &&
                  state.healthList.blood_ketone &&
                  state.healthList.blood_ketone.indicatorList &&
                  state.healthList.blood_ketone.indicatorList.length
                "
                :class="[
                  'status',
                  state.healthList.blood_ketone.color ? state.healthList.blood_ketone.color : 'red'
                ]"
                >{{ state.healthList.blood_ketone.normalFlagName }}</text
              >
              <text class="time">
                {{
                  state.healthList &&
                  state.healthList.blood_ketone &&
                  state.healthList.blood_ketone.collectTime
                    ? parseTime(
                        new Date(
                          state.healthList.blood_ketone.collectTime.replace(/\-/g, '/')
                        ).getTime(),
                        '{y}-{m}-{d} {h}:{i}'
                      ).replace(/\//g, '-')
                    : ''
                }}
              </text>
            </view>
            <view class="min">
              <view class="num">
                <text
                  class="name"
                  v-if="
                    state.healthList &&
                    state.healthList.blood_ketone &&
                    state.healthList.blood_ketone.indicatorList &&
                    state.healthList.blood_ketone.indicatorList.length
                  "
                  >{{ state.healthList.blood_ketone.indicatorList[0].indicatorValue }}</text
                >
                <text class="nodata" v-else>-</text>
                <text
                  class="unit"
                  v-if="
                    state.healthList &&
                    state.healthList.blood_ketone &&
                    state.healthList.blood_ketone.indicatorList &&
                    state.healthList.blood_ketone.indicatorList.length
                  "
                  >mmol/L</text
                >
              </view>
              <icon type="" @tap="add('blood_ketone')" class="iconfont icon-zengjia-11 add" />
            </view>
          </view>
        </view>
        <view class="checkMore">
          <view class="item" @tap="knowFun('blood_ketone')">
            <text class="name">了解</text>
            <text class="quota">血酮</text>
            <img
              class="img"
              src="https://ainengli.meilianshuke.com/jkhx/common/my-arrow-right.png"
              alt=""
            />
            <text class="border" />
          </view>
          <view class="item" @tap="detailFun('blood_ketone')">
            <text class="name">查看详情</text>
            <img
              class="img"
              src="https://ainengli.meilianshuke.com/jkhx/common/my-arrow-right.png"
              alt=""
            />
          </view>
        </view>
      </view>
      <view class="listWrap">
        <view class="header">
          <icon type="" class="iconfont icon-niaosuanluru left" style="color: #ff824d" />
          <view class="right">
            <view class="top cf">
              <text class="name">尿酸</text>
              <text
                v-if="
                  state.healthList &&
                  state.healthList.uric_acid &&
                  state.healthList.uric_acid.normalFlag
                "
                :class="[
                  'status',
                  state.healthList.uric_acid.color ? state.healthList.uric_acid.color : 'red'
                ]"
                >{{ state.healthList.uric_acid.normalFlagName }}</text
              >
              <text class="time">
                {{
                  state.healthList &&
                  state.healthList.uric_acid &&
                  state.healthList.uric_acid.collectTime
                    ? parseTime(
                        new Date(
                          state.healthList.uric_acid.collectTime.replace(/\-/g, '/')
                        ).getTime(),
                        '{y}-{m}-{d} {h}:{i}'
                      ).replace(/\//g, '-')
                    : ''
                }}
              </text>
            </view>
            <view class="min">
              <view class="num">
                <text
                  class="name"
                  v-if="
                    state.healthList &&
                    state.healthList.uric_acid &&
                    state.healthList.uric_acid.indicatorList &&
                    state.healthList.uric_acid.indicatorList.length
                  "
                  >{{ state.healthList.uric_acid.indicatorList[0].indicatorValue }}</text
                >
                <text class="nodata" v-else>-</text>
                <text
                  class="unit"
                  v-if="
                    state.healthList &&
                    state.healthList.uric_acid &&
                    state.healthList.uric_acid.indicatorList &&
                    state.healthList.uric_acid.indicatorList.length
                  "
                  >umol/L</text
                >
              </view>
              <icon type="" @tap="add('uric_acid')" class="iconfont icon-zengjia-11 add" />
            </view>
          </view>
        </view>
        <view class="checkMore">
          <view class="item" @tap="knowFun('uric_acid')">
            <text class="name">了解</text>
            <text class="quota">尿酸</text>
            <img
              class="img"
              src="https://ainengli.meilianshuke.com/jkhx/common/my-arrow-right.png"
              alt=""
            />
            <text class="border" />
          </view>
          <view class="item" @tap="detailFun('uric_acid')">
            <text class="name">查看详情</text>
            <img
              class="img"
              src="https://ainengli.meilianshuke.com/jkhx/common/my-arrow-right.png"
              alt=""
            />
          </view>
        </view>
      </view>
      <view class="listWrap">
        <view class="header">
          <icon type="" class="iconfont icon-shuimianluru left" style="color: #41a4ff" />
          <view class="right">
            <view class="top cf">
              <text class="name">睡眠</text>
              <text
                v-if="
                  state.healthList && state.healthList.sleep && state.healthList.sleep.normalFlag
                "
                :class="[
                  'status',
                  state.healthList.sleep.color ? state.healthList.sleep.color : 'red'
                ]"
                >{{ state.healthList.sleep.normalFlagName }}</text
              >
              <text class="time">
                {{
                  state.healthList && state.healthList.sleep && state.healthList.sleep.collectTime
                    ? parseTime(state.healthList.sleep.collectTime, '{y}-{m}-{d}')
                    : ''
                }}
              </text>
            </view>
            <view class="min">
              <view class="num">
                <text
                  class="name"
                  v-if="
                    state.healthList && state.healthList.sleep && state.healthList.sleep.itemValue
                  "
                  >{{ getSleepTimes(state.healthList.sleep.itemValue) }}</text
                >
                <text class="nodata" v-else>-</text>
              </view>
              <icon type="" @tap="addSleep('sleep')" class="iconfont icon-zengjia-11 add" />
            </view>
          </view>
        </view>
        <view class="checkMore">
          <view class="item" @tap="knowFun('sleep')">
            <text class="name">了解</text>
            <text class="quota">睡眠</text>
            <img
              class="img"
              src="https://ainengli.meilianshuke.com/jkhx/common/my-arrow-right.png"
              alt=""
            />
            <text class="border" />
          </view>
          <view class="item" @tap="detailFun('sleep')">
            <text class="name">查看详情</text>
            <img
              class="img"
              src="https://ainengli.meilianshuke.com/jkhx/common/my-arrow-right.png"
              alt=""
            />
          </view>
        </view>
      </view>

      <view class="listWrap">
        <view class="header">
          <icon type="" class="iconfont icon-yinshuiluru left" style="color: #4bddbe" />
          <view class="right">
            <view class="top cf">
              <text class="name">饮水</text>
              <text
                v-if="
                  state.healthList && state.healthList.water && state.healthList.water.normalFlag
                "
                :class="[
                  'status',
                  state.healthList.water.color ? state.healthList.water.color : 'red'
                ]"
                >{{ state.healthList.water.normalFlagName }}</text
              >
              <text class="time">
                {{
                  state.healthList && state.healthList.water && state.healthList.water.collectTime
                    ? parseTime(state.healthList.water.collectTime, '{y}-{m}-{d}')
                    : ''
                }}
              </text>
            </view>
            <view class="min">
              <view class="num">
                <text
                  class="name"
                  v-if="
                    state.healthList && state.healthList.water && state.healthList.water.itemValue
                  "
                  >{{ state.healthList.water.itemValue }}</text
                >
                <text class="nodata" v-else>-</text>
                <text
                  class="unit"
                  v-if="
                    state.healthList && state.healthList.water && state.healthList.water.itemValue
                  "
                  >ml</text
                >
              </view>
              <icon type="" @tap="add('water')" class="iconfont icon-zengjia-11 add" />
            </view>
          </view>
        </view>
        <view class="checkMore">
          <view class="item" @tap="knowFun('water')">
            <text class="name">了解</text>
            <text class="quota">饮水</text>
            <img
              class="img"
              src="https://ainengli.meilianshuke.com/jkhx/common/my-arrow-right.png"
              alt=""
            />
            <text class="border" />
          </view>
          <view class="item" @tap="detailFun('water')">
            <text class="name">查看详情</text>
            <img
              class="img"
              src="https://ainengli.meilianshuke.com/jkhx/common/my-arrow-right.png"
              alt=""
            />
          </view>
        </view>
      </view>
      <view class="listWrap">
        <view class="header" style="flex-direction: column">
          <view style="display: flex; flex-direction: row">
            <icon type="" class="iconfont icon-xiezhiluru left" style="color: #28dfdf" />
            <view class="right">
              <view class="top cf">
                <text class="name">血脂</text>
                <text
                  v-if="
                    state.healthList &&
                    state.healthList.blood_fat &&
                    state.healthList.blood_fat.normalFlag
                  "
                  :class="[
                    'status',
                    state.healthList.blood_fat.color ? state.healthList.blood_fat.color : 'red'
                  ]"
                  >{{ state.healthList.blood_fat.normalFlagName }}</text
                >
                <text class="time">
                  {{
                    state.healthList &&
                    state.healthList.blood_fat &&
                    state.healthList.blood_fat.collectTime
                      ? parseTime(
                          new Date(
                            state.healthList.blood_fat.collectTime.replace(/\-/g, '/')
                          ).getTime(),
                          '{y}-{m}-{d} {h}:{i}'
                        ).replace(/\//g, '-')
                      : ''
                  }}
                </text>
              </view>
              <view class="min">
                <text />
                <icon type="" @tap="add('blood_fat')" class="iconfont icon-zengjia-11 add" />
              </view>
            </view>
          </view>
          <view style="display: flex; flex-direction: column">
            <view class="min" style="margin-top: 16rpx">
              <text class="report-detail">总胆固醇</text>
              <view>
                <text
                  style="margin-right: 24rpx"
                  class="name"
                  v-if="
                    state.healthList &&
                    state.healthList.blood_fat &&
                    state.healthList.blood_fat.indicatorList &&
                    state.healthList.blood_fat.indicatorList.filter(
                      (item) => item.indicatorKey == 'total_cholesterol'
                    )[0].indicatorValue
                  "
                  >{{
                    state.healthList.blood_fat.indicatorList.filter(
                      (item) => item.indicatorKey == 'total_cholesterol'
                    )[0].indicatorValue
                  }}
                </text>
                <text class="nodata" v-else>-</text>
                <text class="unit">mmol/L</text>
              </view>
            </view>
            <view class="min" style="margin-top: 16rpx">
              <text class="report-detail">甘油三酯</text>
              <view>
                <text
                  style="margin-right: 24rpx"
                  class="name"
                  v-if="
                    state.healthList &&
                    state.healthList.blood_fat &&
                    state.healthList.blood_fat.indicatorList &&
                    state.healthList.blood_fat.indicatorList.filter(
                      (item) => item.indicatorKey == 'tg'
                    )[0].indicatorValue
                  "
                  >{{
                    state.healthList.blood_fat.indicatorList.filter(
                      (item) => item.indicatorKey == 'tg'
                    )[0].indicatorValue
                  }}
                </text>
                <text class="nodata" v-else>-</text>
                <text class="unit">mmol/L</text>
              </view>
            </view>
            <view class="min" style="margin-top: 16rpx">
              <text class="report-detail">高密度脂蛋白</text>
              <view>
                <text
                  style="margin-right: 24rpx"
                  class="name"
                  v-if="
                    state.healthList &&
                    state.healthList.blood_fat &&
                    state.healthList.blood_fat.indicatorList &&
                    state.healthList.blood_fat.indicatorList.filter(
                      (item) => item.indicatorKey == 'hdlc'
                    )[0].indicatorValue
                  "
                  >{{
                    state.healthList.blood_fat.indicatorList.filter(
                      (item) => item.indicatorKey == 'hdlc'
                    )[0].indicatorValue
                  }}
                </text>
                <text class="nodata" v-else>-</text>
                <text class="unit">mmol/L</text>
              </view>
            </view>
            <view class="min" style="margin-top: 16rpx">
              <text class="report-detail">低密度脂蛋白</text>
              <view>
                <text
                  style="margin-right: 24rpx"
                  class="name"
                  v-if="
                    state.healthList &&
                    state.healthList.blood_fat &&
                    state.healthList.blood_fat.indicatorList &&
                    state.healthList.blood_fat.indicatorList.filter(
                      (item) => item.indicatorKey == 'ldlc'
                    )[0].indicatorValue
                  "
                  >{{
                    state.healthList.blood_fat.indicatorList.filter(
                      (item) => item.indicatorKey == 'ldlc'
                    )[0].indicatorValue
                  }}
                </text>
                <text class="nodata" v-else>-</text>
                <text class="unit">mmol/L</text>
              </view>
            </view>
          </view>
        </view>
        <view class="checkMore">
          <view class="item" @tap="knowFun('blood_fat')">
            <text class="name">了解</text>
            <text class="quota">血脂</text>
            <img
              class="img"
              src="https://ainengli.meilianshuke.com/jkhx/common/my-arrow-right.png"
              alt=""
            />
            <text class="border" />
          </view>
          <view class="item" @tap="detailFun('blood_fat')">
            <text class="name">查看详情</text>
            <img
              class="img"
              src="https://ainengli.meilianshuke.com/jkhx/common/my-arrow-right.png"
              alt=""
            />
          </view>
        </view>
      </view>
      <view class="listWrap">
        <view class="header" style="flex-direction: column">
          <view style="display: flex; flex-direction: row">
            <icon type="" class="iconfont icon-gangongnengluru left" style="color: #ff746b" />
            <view class="right">
              <view class="top cf">
                <text class="name">肝功能</text>
                <text
                  v-if="
                    state.healthList &&
                    state.healthList.liver_function &&
                    state.healthList.liver_function.normalFlag
                  "
                  :class="[
                    'status',
                    state.healthList.liver_function.color
                      ? state.healthList.liver_function.color
                      : 'red'
                  ]"
                  >{{ state.healthList.liver_function.normalFlagName }}</text
                >
                <text class="time">
                  {{
                    state.healthList &&
                    state.healthList.liver_function &&
                    state.healthList.liver_function.collectTime
                      ? parseTime(
                          new Date(
                            state.healthList.liver_function.collectTime.replace(/\-/g, '/')
                          ).getTime(),
                          '{y}-{m}-{d} {h}:{i}'
                        ).replace(/\//g, '-')
                      : ''
                  }}
                </text>
              </view>
              <view class="min">
                <text />
                <icon type="" @tap="add('liver_function')" class="iconfont icon-zengjia-11 add" />
              </view>
            </view>
          </view>
          <view style="display: flex; flex-direction: column">
            <view class="min" style="margin-top: 16rpx">
              <text class="report-detail">谷草转氨酶</text>
              <view>
                <text
                  style="margin-right: 24rpx"
                  class="name"
                  v-if="
                    state.healthList &&
                    state.healthList.liver_function &&
                    state.healthList.liver_function.indicatorList &&
                    state.healthList.liver_function.indicatorList.filter(
                      (item) => item.indicatorKey == 'got'
                    )[0].indicatorValue
                  "
                  >{{
                    state.healthList.liver_function.indicatorList.filter(
                      (item) => item.indicatorKey == 'got'
                    )[0].indicatorValue
                  }}</text
                >
                <text class="nodata" v-else>-</text>
                <text class="unit">U/L</text>
              </view>
            </view>
            <view class="min" style="margin-top: 16rpx">
              <text class="report-detail">谷丙转氨酶</text>
              <view>
                <text
                  style="margin-right: 24rpx"
                  class="name"
                  v-if="
                    state.healthList &&
                    state.healthList.liver_function &&
                    state.healthList.liver_function.indicatorList &&
                    state.healthList.liver_function.indicatorList.filter(
                      (item) => item.indicatorKey == 'gpt'
                    )[0].indicatorValue
                  "
                  >{{
                    state.healthList.liver_function.indicatorList.filter(
                      (item) => item.indicatorKey == 'gpt'
                    )[0].indicatorValue
                  }}</text
                >
                <text class="nodata" v-else>-</text>
                <text class="unit">U/L</text>
              </view>
            </view>
            <view class="min" style="margin-top: 16rpx">
              <text class="report-detail">Y-谷氨酰转肽酶 (Y-GT)</text>

              <view>
                <text
                  style="margin-right: 24rpx"
                  class="name"
                  v-if="
                    state.healthList &&
                    state.healthList.liver_function &&
                    state.healthList.liver_function.indicatorList &&
                    state.healthList.liver_function.indicatorList.filter(
                      (item) => item.indicatorKey == 'ygt'
                    )[0].indicatorValue
                  "
                  >{{
                    state.healthList.liver_function.indicatorList.filter(
                      (item) => item.indicatorKey == 'ygt'
                    )[0].indicatorValue
                  }}</text
                >
                <text class="nodata" v-else>-</text>
                <text class="unit">U/L</text>
              </view>
            </view>
          </view>
        </view>
        <view class="checkMore">
          <view class="item" @tap="knowFun('liver_function')">
            <text class="name">了解</text>
            <text class="quota">肝功能</text>
            <img
              class="img"
              src="https://ainengli.meilianshuke.com/jkhx/common/my-arrow-right.png"
              alt=""
            />
            <text class="border" />
          </view>
          <view class="item" @tap="detailFun('liver_function')">
            <text class="name">查看详情</text>
            <img
              class="img"
              src="https://ainengli.meilianshuke.com/jkhx/common/my-arrow-right.png"
              alt=""
            />
          </view>
        </view>
      </view>
    </view>
    <view @touchmove.stop.prevent="prevent">
      <up-popup
        :show="show"
        :closeable="true"
        mode="bottom"
        @close="close"
        :custom-style="{ 'max-height': '98vh', overflow: 'auto' }"
        :round="16"
      >
        <view class="popup-wrap">
          <view class="title">
            {{ getCheckRulesTypeName(state.checkRulesType) }}
          </view>
          <view class="tabKey">
            <text
              :class="[
                'name',
                state.checkRulesType == 'whr' ||
                state.checkRulesType == 'heart' ||
                state.checkRulesType == 'blood_oxygen' ||
                state.checkRulesType == 'sleep' ||
                state.checkRulesType == 'water' ||
                state.checkRulesType == 'blood_ketone' ||
                state.checkRulesType == 'uric_acid' ||
                state.checkRulesType == 'blood_fat' ||
                state.checkRulesType == 'liver_function'
                  ? 'on'
                  : ''
              ]"
              @tap="measurementFun"
              >{{
                state.checkRulesType == 'BMI'
                  ? '如何测量BMI？'
                  : state.checkRulesType == 'whr'
                  ? '如何测量腰臀比？'
                  : state.checkRulesType == 'blood_pressure'
                  ? '如何测量血压？'
                  : state.checkRulesType == 'blood_sugar'
                  ? '如何测量血糖？'
                  : '如何测量？'
              }}
            </text>
            <view v-if="state.tabkeyboardShow">
              <view class="keyboard" @tap="measuremenKey('keyboard')">
                <text type="" class="iconfont icon-jianpan1 img" />
                <text class="key">切换键盘</text>
              </view>
            </view>
            <view v-else>
              <view class="keyboard" @tap="measuremenKey('slideRule')">
                <text type="" class="iconfont icon-huachi1 img" />
                <text class="key">切换滑尺</text>
              </view>
            </view>
          </view>
          <view class="listWraps" v-if="state.checkRulesType == 'blood_sugar'">
            <scroll-view class="scroll-view_H" scroll-x="true" :scroll-left="scrollLeft">
              <view
                :class="['item', state.bloodSugarActive == index ? 'on' : '']"
                v-for="(item, index) in bloodSugarList"
                :key="index"
                @tap="bloodSugarTab(item, index)"
              >
                <text class="name">{{ item.name }}</text>
                <text class="time-title">{{ item.title }}</text>
              </view>
            </scroll-view>
          </view>
          <view class="scoring" v-if="state.slideRuleShow">
            <slideRule
              v-if="
                state.checkRulesType == 'BMI' ||
                state.checkRulesType == 'whr' ||
                state.checkRulesType == 'blood_pressure' ||
                state.checkRulesType == 'heart' ||
                state.checkRulesType == 'blood_oxygen' ||
                state.checkRulesType == 'blood_sugar' ||
                state.checkRulesType == 'blood_ketone' ||
                state.checkRulesType == 'uric_acid' ||
                state.checkRulesType == 'water' ||
                state.checkRulesType == 'blood_fat' ||
                state.checkRulesType == 'liver_function'
              "
              :message="message"
              @childEvent="childEvent"
            />
            <slideRule
              v-if="
                state.checkRulesType == 'BMI' ||
                state.checkRulesType == 'whr' ||
                state.checkRulesType == 'blood_pressure' ||
                state.checkRulesType == 'blood_fat' ||
                state.checkRulesType == 'liver_function'
              "
              style="margin-top: 40rpx"
              :message="messageWeight"
              @childEvent="childEvent"
            />
            <slideRule
              v-if="
                state.checkRulesType == 'blood_pressure' ||
                state.checkRulesType == 'blood_fat' ||
                state.checkRulesType == 'liver_function'
              "
              style="margin-top: 40rpx"
              :message="messageThree"
              @childEvent="childEvent"
            />
            <slideRule
              v-if="state.checkRulesType == 'blood_fat'"
              style="margin-top: 40rpx"
              :message="messageFour"
              @childEvent="childEvent"
            />
          </view>
          <view class="measure" v-else>
            <view class="numWrap cf">
              <view
                class="item"
                v-if="
                  state.checkRulesType == 'BMI' ||
                  state.checkRulesType == 'whr' ||
                  state.checkRulesType == 'blood_pressure' ||
                  state.checkRulesType == 'heart' ||
                  state.checkRulesType == 'blood_sugar' ||
                  state.checkRulesType == 'blood_oxygen' ||
                  state.checkRulesType == 'water' ||
                  state.checkRulesType == 'blood_ketone' ||
                  state.checkRulesType == 'uric_acid' ||
                  state.checkRulesType == 'blood_fat' ||
                  state.checkRulesType == 'liver_function'
                "
              >
                <input
                  v-model="measurementValue.height"
                  class="value"
                  type="digit"
                  placeholder="--"
                  :maxlength="5"
                />
                <view class="wraps" v-if="state.checkRulesType == 'BMI'">
                  <text class="name">身高</text>
                  <text class="name">CM</text>
                </view>
                <view class="wraps" v-else-if="state.checkRulesType == 'whr'">
                  <text class="name">腰围</text>
                  <text class="name">CM</text>
                </view>
                <view class="wraps" v-else-if="state.checkRulesType == 'blood_pressure'">
                  <text class="name">收缩压</text>
                  <text class="name">mmHg</text>
                </view>
                <view class="wraps" v-else-if="state.checkRulesType == 'heart'">
                  <text class="name">心率</text>
                  <text class="name">次/分</text>
                </view>
                <view class="wraps" v-else-if="state.checkRulesType == 'blood_sugar'">
                  <text class="name">血糖</text>
                  <text class="name">mmol/L</text>
                </view>
                <view class="wraps" v-else-if="state.checkRulesType == 'blood_oxygen'">
                  <text class="name">血氧饱和度</text>
                  <text class="name">%</text>
                </view>
                <view class="wraps" v-else-if="state.checkRulesType == 'water'">
                  <text class="name">饮水</text>
                  <text class="name">ml</text>
                </view>
                <view class="wraps" v-else-if="state.checkRulesType == 'blood_ketone'">
                  <text class="name">血酮</text>
                  <text class="name">mmol/L</text>
                </view>
                <view class="wraps" v-else-if="state.checkRulesType == 'uric_acid'">
                  <text class="name">尿酸</text>
                  <text class="name">umol/L</text>
                </view>
                <view class="wraps" v-else-if="state.checkRulesType == 'blood_fat'">
                  <text class="name">总胆固醇</text>
                  <text class="name">mmol/L</text>
                </view>
                <view class="wraps" v-else-if="state.checkRulesType == 'liver_function'">
                  <text class="name">谷草转氨酶</text>
                  <text class="name">U/L</text>
                </view>
              </view>
              <view
                class="item"
                v-if="
                  state.checkRulesType == 'BMI' ||
                  state.checkRulesType == 'whr' ||
                  state.checkRulesType == 'blood_pressure' ||
                  state.checkRulesType == 'blood_fat' ||
                  state.checkRulesType == 'liver_function'
                "
              >
                <input
                  v-model="measurementValue.weight"
                  class="value"
                  type="digit"
                  placeholder="--"
                  :maxlength="5"
                />
                <view class="wraps" v-if="state.checkRulesType == 'BMI'">
                  <text class="name">体重</text>
                  <text class="name">KG</text>
                </view>
                <view class="wraps" v-else-if="state.checkRulesType == 'whr'">
                  <text class="name">臀围</text>
                  <text class="name">CM</text>
                </view>
                <view class="wraps" v-else-if="state.checkRulesType == 'blood_pressure'">
                  <text class="name">舒张压</text>
                  <text class="name">mmHg</text>
                </view>
                <view class="wraps" v-else-if="state.checkRulesType == 'blood_fat'">
                  <text class="name">甘油三酯</text>
                  <text class="name">mmol/L</text>
                </view>
                <view class="wraps" v-else-if="state.checkRulesType == 'liver_function'">
                  <text class="name">谷丙转氨酶</text>
                  <text class="name">U/L</text>
                </view>
              </view>
              <view
                class="item"
                v-if="
                  state.checkRulesType == 'blood_pressure' ||
                  state.checkRulesType == 'blood_fat' ||
                  state.checkRulesType == 'liver_function'
                "
              >
                <input
                  v-model="measurementValue.pulse"
                  class="value"
                  type="digit"
                  placeholder="--"
                  :maxlength="3"
                />
                <view class="wraps" v-if="state.checkRulesType == 'blood_pressure'">
                  <text class="name">脉搏</text>
                  <text class="name">次/分</text>
                </view>
                <view class="wraps" v-else-if="state.checkRulesType == 'blood_fat'">
                  <text class="name">高密度脂蛋白</text>
                  <text class="name">mmol/L</text>
                </view>
                <view class="wraps" v-else-if="state.checkRulesType == 'liver_function'">
                  <text class="name">Y-谷氨酰转肽酶</text>
                  <text class="name">U/L</text>
                </view>
              </view>
              <view class="item" v-if="state.checkRulesType == 'blood_fat'">
                <input
                  v-model="measurementValue.fourValue"
                  class="value"
                  type="digit"
                  placeholder="--"
                  :maxlength="3"
                />
                <view class="wraps" v-if="state.checkRulesType == 'blood_fat'">
                  <text class="name">低密度脂蛋白</text>
                  <text class="name">mmol/L</text>
                </view>
              </view>
            </view>
          </view>
          <view class="measureTime">
            <text class="name" v-if="state.checkRulesType != 'water'">测量时间</text>
            <text class="name" v-else>录入日期</text>
            <view class="time" @tap="timeFun">
              <text class="titles">{{
                state.checkRulesType == 'water'
                  ? parseTime(state.time, '{y}年{m}月{d}日')
                  : parseTime(state.time, '{m}月{d}日 {h}:{i}')
              }}</text>
              <img
                class="img"
                src="https://ainengli.meilianshuke.com/jkhx/common/my-arrow-right.png"
                alt=""
              />
            </view>
          </view>
          <view class="fixedBtn" @tap="sure">
            <text class="name">提交</text>
          </view>
        </view>
      </up-popup>
    </view>
    <!-- 睡眠录入 -->
    <view @touchmove.stop.prevent="prevent">
      <up-popup
        :show="showSleep"
        :closeable="true"
        mode="bottom"
        @close="close"
        :custom-style="{ 'max-height': '98vh', overflow: 'auto' }"
        :round="16"
      >
        <view class="popup-wrap">
          <view class="title"> 睡眠录入 </view>

          <view class="measureTime sleepTime" style="margin-top: 32rpx">
            <text class="name">入睡时间</text>
            <view class="time" @tap="timeSleepFun(state.sleepDate, 'sleep')">
              <text class="titles">{{ parseTime(state.sleepDate, '{m}月{d}日 {h}:{i}') }}</text>
              <img
                class="img"
                src="https://ainengli.meilianshuke.com/jkhx/common/my-arrow-right.png"
                alt=""
              />
            </view>
          </view>
          <view class="measureTime sleepTime">
            <text class="name">醒来时间</text>
            <view class="time" @tap="timeSleepFun(state.wakeupDate, 'wakeup')">
              <text class="titles">{{ parseTime(state.wakeupDate, '{m}月{d}日 {h}:{i}') }}</text>
              <img
                class="img"
                src="https://ainengli.meilianshuke.com/jkhx/common/my-arrow-right.png"
                alt=""
              />
            </view>
          </view>
          <view class="measureTime sleepTime">
            <text class="name">睡眠日期</text>
            <view class="time">
              <text class="titles">{{ parseTime(state.wakeupDate, '{m}月{d}日') }}</text>
            </view>
          </view>
          <view class="fixedBtn" @tap="sureSleep">
            <text class="name">提交</text>
          </view>
        </view>
      </up-popup>
    </view>
    <view @touchmove.stop.prevent="prevent">
      <up-popup
        :show="measurementShow"
        :closeable="true"
        mode="bottom"
        @close="goit"
        :custom-style="{
          'max-height': '98vh',
          overflow: 'auto'
        }"
      >
        <view class="popup-wrap">
          <view class="title">正确测量方法</view>
          <view class="content">
            <view class="contentWrap" v-if="state.checkRulesType == 'BMI'">
              <view class="contentItem"
                >1.将体脂称放置在坚固且平坦的地面上，测量过程请勿弯曲膝关节。</view
              >
              <img
                class="img"
                mode="widthFix"
                src="https://ainengli.meilianshuke.com/jkhx/BMI2.png"
                alt=""
              />
              <view class="contentItem">赤脚站立，并将脚心对准体脂称中间。</view>
              <img
                class="img"
                mode="widthFix"
                src="https://ainengli.meilianshuke.com/jkhx/BMI1.png"
              />
            </view>
            <view class="contentWrap" v-if="state.checkRulesType == 'blood_pressure'">
              <view class="contentItem">1.测量前30分钟不得进行剧烈运动。</view>
              <view class="contentItem">2.测量的时候，手臂要放松，放置在与心脏齐平的桌面上。</view>
              <img
                class="img"
                mode="widthFix"
                src="https://ainengli.meilianshuke.com/jkhx/bloodPressure.png"
              />
            </view>
            <view class="contentWrap" v-if="state.checkRulesType == 'blood_sugar'">
              <view class="contentItem">1.沿着箭头方向将试纸插入血糖仪。</view>
              <img
                class="img"
                mode="widthFix"
                src="https://ainengli.meilianshuke.com/jkhx/bloodSugar1.png"
              />
              <view class="contentItem">2.将血滴接触试纸窗口的前沿位置。</view>
              <img
                class="img"
                mode="widthFix"
                src="https://ainengli.meilianshuke.com/jkhx/bloodSugar2.png"
              />
            </view>
            <view class="fixedBtn" @tap="goit">
              <view class="name">知道了</view>
            </view>
          </view>
        </view>
      </up-popup>
    </view>
    <view @touchmove.stop.prevent="prevent">
      <up-datetime-picker
        :show="dateShow"
        v-model="state.datetime"
        :closeOnClickOverlay="true"
        :minDate="state.minDate"
        :maxDate="new Date().getTime()"
        :mode="state.checkRulesType == 'water' ? 'date' : 'datetime'"
        @close="closeDateTime"
        @confirm="confirmDateTime"
        @cancel="closeDateTime"
        @change="changeFun"
      />
    </view>
    <!-- sleep 时间 -->
    <view @touchmove.stop.prevent="prevent">
      <up-datetime-picker
        :show="dateSleepShow"
        v-model="state.datetime"
        :closeOnClickOverlay="true"
        :minDate="state.minDate"
        :maxDate="new Date().getTime()"
        mode="datetime"
        @close="closeSleepDateTime"
        @confirm="confirmSleepDateTime"
        @cancel="closeSleepDateTime"
        @change="changeSleepFun"
      />
    </view>
    <!--  -->
    <view @touchmove.stop.prevent="prevent">
      <up-popup :show="abnormalShow" :round="8" mode="center" @close="abnormalClose">
        <view class="abnormalContent">
          <view class="title"> 异常提醒 </view>
          <text class="content">
            {{
              state.checkRulesType == 'BMI'
                ? '您的BMI异常，请关注体重数据'
                : state.checkRulesType == 'whr'
                ? '您的腰臀比数据异常，请关注'
                : state.checkRulesType == 'blood_pressure'
                ? '您的血压异常，建议您增加监测次数并咨询医生'
                : state.checkRulesType == 'heart'
                ? '您的心率异常，建议您增加监测次数并咨询医生'
                : state.checkRulesType == 'blood_sugar'
                ? '您的血糖异常，建议您增加监测次数并咨询医生'
                : state.checkRulesType == 'blood_oxygen'
                ? '您的血氧异常，建议您增加监测次数并咨询医生'
                : state.checkRulesType == 'blood_ketone'
                ? '您的血酮异常，建议您增加监测次数并咨询医生'
                : state.checkRulesType == 'uric_acid'
                ? '您的尿酸异常，建议您增加监测次数并咨询医生'
                : state.checkRulesType == 'sleep'
                ? '您的睡眠时间过短，请注意'
                : state.checkRulesType == 'water'
                ? '您当天饮水量不足，请及时补充'
                : state.checkRulesType == 'blood_fat'
                ? '您的血脂异常，建议您增加监测次数并咨询医生'
                : state.checkRulesType == 'liver_function'
                ? '您的肝功能异常，建议您增加监测次数并咨询医生'
                : ''
            }}
          </text>
          <view class="know" @tap="abnormalClose">知道了</view>
        </view>
      </up-popup>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, watch, ref } from 'vue'
import { healthInfoAll, healthInfoSave } from '@/api/hmm'
import { onShow } from '@dcloudio/uni-app'
import { parseTime } from '@/utils/tools'
import slideRule from './components/slideRule'
import { saveNewIndicator, saveReport } from './healthPortrait.api'
const state = reactive({
  isClick: false,
  slideRuleType: '',
  slideRuleTypeDefault: false,
  showTest: false,
  userInfo: {},
  bloodSugarActive: 0,
  current: 60, //刻度指向的位置
  maxValue: 150,
  ruleType: 'cm',
  healthList: {},
  tabkeyboardShow: true,
  slideRuleShow: true,
  datetime: '',
  minDate: 0,
  time: '',
  datetimeNew: '',
  checkRulesType: '', //判断患病类型
  wakeupDate: '',
  sleepDate: ''
})

const sleepTimeType = ref('')

const bloodSugarList = reactive([
  // {
  //   name: '早起',
  //   title: '空腹',
  //   id: 1
  // },
  // {
  //   name: '早餐后',
  //   title: '两小时',
  //   id: 2
  // },
  // {
  //   name: '午餐后',
  //   title: '两小时',
  //   id: 3
  // },
  // {
  //   name: '晚餐后',
  //   title: '两小时',
  //   id: 4
  // }

  {
    name: '早起',
    title: '空腹',
    value: 'empty_stomach'
  },
  {
    name: '早餐后',
    title: '2小时',
    value: 'breakfast_after_2'
  },
  {
    name: '午餐前',
    title: '-',
    value: 'lunch_before'
  },
  {
    name: '午餐后',
    title: '2小时',
    value: 'lunch_after_2'
  },
  {
    name: '晚餐前',
    title: '-',
    value: 'dinner_before'
  },
  {
    name: '晚餐后',
    title: '2小时',
    value: 'dinner_after_2'
  },
  {
    name: '睡前',
    title: '-',
    value: 'sleep_before'
  }
])
const measurementShow = ref(false)
const show = ref(false)
const showSleep = ref(false)
const dateShow = ref(false)
const dateSleepShow = ref(false)
const abnormalShow = ref(false)
// 测量
const message = ref({
  currentScore: 50,
  maxValue: 100,
  name: '',
  unit: ''
})
const messageWeight = ref({
  currentScore: 100,
  maxValue: 150,
  name: '',
  unit: ''
})
const messageThree = ref({
  currentScore: 100,
  maxValue: 150,
  name: '',
  unit: ''
})

const messageFour = ref({
  currentScore: 100,
  maxValue: 150,
  name: '',
  unit: ''
})
const measurementValue = ref({
  height: 0, //身高
  weight: 0, //体重
  pulse: 0, //脉搏,
  fourValue: 0 // 第四组值
})

let scrollLeft: string = '0rpx'

onShow(() => {
  scrollLeft = '0rpx'
  state.userInfo = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo')).patientInfo
    : {}
  state.datetime = parseTime(new Date().getTime(), '{y}-{m}-{d} {h}:{i}')
  init()
  getMinTime()
})

// 获取睡眠时长
const getSleepTimes = (value: string) => {
  const sleepTimes = value.split('.')
  const hour = Number(sleepTimes[0])
  if (sleepTimes[1]) {
    const minute = Math.round(Number('0.' + sleepTimes[1]) * 60)
    return `${hour}小时${minute > 10 ? minute : '0' + minute}分`
  } else {
    return `${hour}小时`
  }
}

// 获取录入类型名称
const getCheckRulesTypeName = (type: string) => {
  let name: string = ''

  switch (type) {
    case 'BMI':
      name = '身高体重录入'
      break
    case 'whr':
      name = '腰臀比录入'
      break
    case 'blood_pressure':
      name = '血压录入'
      break
    case 'heart':
      name = '心率录入'
      break
    case 'blood_sugar':
      name = '血糖录入'
      break
    case 'blood_oxygen':
      name = '血氧录入'
      break
    case 'blood_ketone':
      name = '血酮录入'
      break
    case 'uric_acid':
      name = '尿酸录入'
      break
    case 'sleep':
      name = '睡眠录入'
      break
    case 'water':
      name = '饮水录入'
      break
    case 'blood_fat':
      name = '血脂录入'
      break
    case 'liver_function':
      name = '肝功能录入'
      break
    default:
      name = ''
      break
  }
  return name
}

const init = () => {
  uni.showLoading({
    title: '加载中'
  })
  const param = state.userInfo.empi
  healthInfoAll(param).then((res) => {
    uni.hideLoading()
    if (res.code == 0) {
      state.healthList = res.data
    } else {
      state.healthList = {}
    }
  })
}
const getMinTime = () => {
  const date = new Date()
  date.setFullYear(new Date().getFullYear())
  date.setMonth(0)
  date.setDate(1)
  date.setHours(0)
  date.setMinutes(0)
  state.minDate = date.getTime()
}
const prevent = () => {}
const add = (name) => {
  state.tabkeyboardShow = true
  state.slideRuleShow = true
  state.slideRuleType = ''
  state.slideRuleTypeDefault = false
  state.isClick = false
  state.time = parseTime(new Date().getTime(), '{y}-{m}-{d} {h}:{i}').replace(/\//g, '-')
  message.value.currentScore = 50
  message.value.maxValue = 100
  state.checkRulesType = ''
  message.value.name = ''
  setTimeout(() => {
    show.value = true
    state.checkRulesType = name
  }, 10)
  message.value.unit = ''
  messageWeight.value.currentScore = 100
  messageWeight.value.maxValue = 150
  messageWeight.value.name = ''
  messageWeight.value.unit = ''
  messageThree.value.currentScore = 100
  messageThree.value.maxValue = 150
  messageThree.value.name = ''
  messageThree.value.unit = ''
  messageFour.value.currentScore = 100
  messageFour.value.maxValue = 150
  messageFour.value.name = ''
  messageFour.value.unit = ''
  measurementValue.value.height = 0
  measurementValue.value.weight = 0
  measurementValue.value.pulse = 0
  measurementValue.value.fourValue = 0
  state.bloodSugarActive = 0
  if (name == 'BMI') {
    message.value.currentScore = state.healthList.height.itemValue
      ? Math.round(Number(state.healthList.height.itemValue))
      : 170
    measurementValue.value.height = state.healthList.height.itemValue
      ? Math.round(Number(state.healthList.height.itemValue))
      : 170
    message.value.maxValue = 250
    message.value.name = '身高'
    message.value.unit = 'cm'
    messageWeight.value.currentScore = state.healthList.weight.itemValue
      ? Math.round(Number(state.healthList.weight.itemValue))
      : 65
    measurementValue.value.weight = state.healthList.weight.itemValue
      ? Math.round(Number(state.healthList.weight.itemValue))
      : 65
    messageWeight.value.maxValue = 200
    messageWeight.value.name = '体重'
    messageWeight.value.unit = 'kg'
  } else if (name == 'whr') {
    message.value.currentScore = state.healthList.waist.itemValue
      ? Math.round(Number(state.healthList.waist.itemValue))
      : 85
    measurementValue.value.height = state.healthList.waist.itemValue
      ? Math.round(Number(state.healthList.waist.itemValue))
      : 85
    message.value.maxValue = 200
    message.value.name = '腰围'
    message.value.unit = 'cm'
    messageWeight.value.currentScore = state.healthList.hip.itemValue
      ? Math.round(Number(state.healthList.hip.itemValue))
      : 100
    measurementValue.value.weight = state.healthList.hip.itemValue
      ? Math.round(Number(state.healthList.hip.itemValue))
      : 100
    messageWeight.value.maxValue = 200
    messageWeight.value.name = '臀围'
    messageWeight.value.unit = 'cm'
  } else if (name == 'blood_pressure') {
    message.value.currentScore = state.healthList.sbp.itemValue
      ? Math.round(Number(state.healthList.sbp.itemValue))
      : 120
    measurementValue.value.height = state.healthList.sbp.itemValue
      ? Math.round(Number(state.healthList.sbp.itemValue))
      : 120
    message.value.maxValue = 300
    message.value.name = '收缩压'
    message.value.unit = 'mmHg'
    messageWeight.value.currentScore = state.healthList.dbp.itemValue
      ? Math.round(Number(state.healthList.dbp.itemValue))
      : 80
    measurementValue.value.weight = state.healthList.dbp.itemValue
      ? Math.round(Number(state.healthList.dbp.itemValue))
      : 80
    messageWeight.value.maxValue = 300
    messageWeight.value.name = '舒张压'
    messageWeight.value.unit = 'mmHg'
    messageThree.value.currentScore = state.healthList.pulseRate.itemValue
      ? Math.round(Number(state.healthList.pulseRate.itemValue))
      : 75
    measurementValue.value.pulse = state.healthList.pulseRate.itemValue
      ? Math.round(Number(state.healthList.pulseRate.itemValue))
      : 75
    messageThree.value.maxValue = 180
    messageThree.value.name = '脉搏'
    messageThree.value.unit = '次/分'
  } else if (name == 'heart') {
    message.value.currentScore = state.healthList.heartRate.itemValue
      ? Math.round(Number(state.healthList.heartRate.itemValue))
      : 75
    measurementValue.value.height = state.healthList.heartRate.itemValue
      ? Math.round(Number(state.healthList.heartRate.itemValue))
      : 75
    message.value.maxValue = 180
    message.value.name = '心率'
    message.value.unit = '次/分'
  } else if (name == 'blood_sugar') {
    getBloodSugarTime()
    if (state.healthList.pbg) {
      if (state.healthList.pbg.itemValue) {
        message.value.currentScore = state.healthList.pbg.itemValue
          ? Number(state.healthList.pbg.itemValue)
          : 5.5
        measurementValue.value.height = state.healthList.pbg.itemValue
          ? Number(state.healthList.pbg.itemValue)
          : 5.5
      } else {
        message.value.currentScore = 5.5
        measurementValue.value.height = 5.5
      }
    } else {
      if (state.healthList.fbg.itemValue) {
        message.value.currentScore = state.healthList.fbg.itemValue
          ? Number(state.healthList.fbg.itemValue)
          : 5.5
        measurementValue.value.height = state.healthList.fbg.itemValue
          ? Number(state.healthList.fbg.itemValue)
          : 5.5
      } else {
        message.value.currentScore = 5.5
        measurementValue.value.height = 5.5
      }
    }
    message.value.maxValue = 30
    message.value.name = '血糖'
    message.value.unit = 'mmol/L'
  } else if (name == 'blood_oxygen') {
    message.value.currentScore = state.healthList.spo2.itemValue
      ? Math.round(Number(state.healthList.spo2.itemValue))
      : 97
    measurementValue.value.height = state.healthList.spo2.itemValue
      ? Math.round(Number(state.healthList.spo2.itemValue))
      : 97
    message.value.maxValue = 100
    message.value.name = '血氧饱和度'
    message.value.unit = '%'
  } else if (name == 'blood_ketone') {
    message.value.currentScore =
      state.healthList.blood_ketone &&
      state.healthList.blood_ketone.indicatorList &&
      state.healthList.blood_ketone.indicatorList.length
        ? Number(state.healthList.blood_ketone.indicatorList[0].indicatorValue)
        : 0.17
    measurementValue.value.height =
      state.healthList.blood_ketone &&
      state.healthList.blood_ketone.indicatorList &&
      state.healthList.blood_ketone.indicatorList.length
        ? Number(state.healthList.blood_ketone.indicatorList[0].indicatorValue)
        : 0.17
    message.value.maxValue = 4.0
    message.value.name = '血酮'
    message.value.unit = 'mmol/L'
  } else if (name == 'uric_acid') {
    message.value.currentScore =
      state.healthList.uric_acid &&
      state.healthList.uric_acid.indicatorList &&
      state.healthList.uric_acid.indicatorList.length
        ? Math.round(Number(state.healthList.uric_acid.indicatorList[0].indicatorValue))
        : 200
    measurementValue.value.height =
      state.healthList.uric_acid &&
      state.healthList.uric_acid.indicatorList &&
      state.healthList.uric_acid.indicatorList.length
        ? Math.round(Number(state.healthList.uric_acid.indicatorList[0].indicatorValue))
        : 200
    message.value.maxValue = 600
    message.value.name = '尿酸'
    message.value.unit = 'umol/L'
  } else if (name == 'water') {
    message.value.currentScore =
      state.healthList.water && state.healthList.water.itemValue
        ? Math.round(Number(state.healthList.water.itemValue))
        : 2000
    measurementValue.value.height =
      state.healthList.water && state.healthList.water.itemValue
        ? Math.round(Number(state.healthList.water.itemValue))
        : 2000
    message.value.maxValue = 4000
    message.value.name = '饮水'
    message.value.unit = 'ml'
  } else if (name == 'blood_fat') {
    const listData =
      state.healthList.blood_fat && state.healthList.blood_fat.indicatorList
        ? state.healthList.blood_fat.indicatorList
        : []
    const total_cholesterol = listData.filter((item) => item.indicatorKey == 'total_cholesterol')[0]
    message.value.currentScore = total_cholesterol ? Number(total_cholesterol.indicatorValue) : 4.0
    measurementValue.value.height = total_cholesterol
      ? Number(total_cholesterol.indicatorValue)
      : 4.0
    message.value.maxValue = 6.0
    message.value.name = '总胆固醇'
    message.value.unit = 'mmol/L'

    const tg = listData.filter((item) => item.indicatorKey == 'tg')[0]
    messageWeight.value.currentScore = tg ? Number(tg.indicatorValue) : 1.0
    measurementValue.value.weight = tg ? Number(tg.indicatorValue) : 1.0
    messageWeight.value.maxValue = 3.0
    messageWeight.value.name = '甘油三酯'
    messageWeight.value.unit = 'mmol/L'

    const hdlc = listData.filter((item) => item.indicatorKey == 'hdlc')[0]
    messageThree.value.currentScore = hdlc ? Number(hdlc.indicatorValue) : 1.3
    measurementValue.value.pulse = hdlc ? Number(hdlc.indicatorValue) : 1.3
    messageThree.value.maxValue = 3.0
    messageThree.value.name = '高密度脂蛋白'
    messageThree.value.unit = 'mmol/L'

    const ldlc = listData.filter((item) => item.indicatorKey == 'ldlc')[0]
    measurementValue.value.fourValue = ldlc ? Number(ldlc.indicatorValue) : 3.0
    messageFour.value.currentScore = ldlc ? Number(ldlc.indicatorValue) : 3.0
    messageFour.value.maxValue = 5.0
    messageFour.value.name = '低密度脂蛋白'
    messageFour.value.unit = 'mmol/L'
  } else if (name == 'liver_function') {
    const listData =
      state.healthList.liver_function && state.healthList.liver_function.indicatorList
        ? state.healthList.liver_function.indicatorList
        : []
    const got = listData.filter((item) => item.indicatorKey == 'got')[0]
    message.value.currentScore = got ? Math.round(Number(got.indicatorValue)) : 28
    measurementValue.value.height = got ? Math.round(Number(got.indicatorValue)) : 28
    message.value.maxValue = 60
    message.value.name = '谷草转氨酶'
    message.value.unit = 'U/L'

    const gpt = listData.filter((item) => item.indicatorKey == 'gpt')[0]
    messageWeight.value.currentScore = gpt ? Math.round(Number(gpt.indicatorValue)) : 30
    measurementValue.value.weight = gpt ? Math.round(Number(gpt.indicatorValue)) : 30
    messageWeight.value.maxValue = 60
    messageWeight.value.name = '谷丙转氨酶'
    messageWeight.value.unit = 'U/L'

    const ygt = listData.filter((item) => item.indicatorKey == 'ygt')[0]
    messageThree.value.currentScore = ygt ? Math.round(Number(ygt.indicatorValue)) : 26
    measurementValue.value.pulse = ygt ? Math.round(Number(ygt.indicatorValue)) : 26
    messageThree.value.maxValue = 60
    messageThree.value.name = 'Y-谷氨酰转肽酶'
    messageThree.value.unit = 'U/L'
  }
}

const addSleep = (name: string) => {
  showSleep.value = true
  state.wakeupDate = parseTime(new Date(), '{y}-{m}-{d} 06:00')
  state.sleepDate = getYesterdayAt2200()
  state.checkRulesType = name
}

// 获取昨天 22:00 的日期时间字符串
const getYesterdayAt2200 = () => {
  const yesterday = new Date()
  yesterday.setDate(yesterday.getDate() - 1)
  yesterday.setHours(22, 0, 0, 0)

  return yesterday.toISOString().split('T')[0] + ' 22:00'
}

const close = () => {
  show.value = false
  showSleep.value = false
}
const sure = () => {
  if (state.isClick == true) {
    return false
  }
  if (state.time == '') {
    uni.showToast({
      title: '请选择测量时间',
      icon: 'none'
    })
    return false
  }
  uni.showLoading({
    title: '加载中'
  })
  let param = {}
  if (state.checkRulesType == 'BMI') {
    const bmiDate = (
      (measurementValue.value.weight /
        measurementValue.value.height /
        measurementValue.value.height) *
      10000
    ).toFixed(1)
    param = {
      empi: state.userInfo.empi,
      bmi: bmiDate,
      height: measurementValue.value.height,
      weight: measurementValue.value.weight,
      collectTime: state.time + ':00',
      dataSource: 'MANUAL'
    }
    oldHealthDataSave(param)
  } else if (state.checkRulesType == 'whr') {
    const bmiDate = (measurementValue.value.height / measurementValue.value.weight).toFixed(2)
    param = {
      empi: state.userInfo.empi,
      whr: bmiDate,
      waist: Number(measurementValue.value.height),
      hip: Number(measurementValue.value.weight),
      collectTime: state.time + ':00',
      dataSource: 'MANUAL'
    }
    oldHealthDataSave(param)
  } else if (state.checkRulesType == 'blood_pressure') {
    param = {
      empi: state.userInfo.empi,
      sbp: Number(measurementValue.value.height),
      dbp: Number(measurementValue.value.weight),
      pulseRate: Number(measurementValue.value.pulse),
      collectTime: state.time + ':00',
      dataSource: 'MANUAL'
    }
    oldHealthDataSave(param)
  } else if (state.checkRulesType == 'heart') {
    const reg = /^\+?[1-9][0-9]*$/
    if (reg.test(measurementValue.value.height + '')) {
      param = {
        empi: state.userInfo.empi,
        heartRate: measurementValue.value.height,
        collectTime: state.time + ':00',
        dataSource: 'MANUAL'
      }
    } else {
      uni.hideLoading()
      uni.showToast({
        title: '请输入正整数',
        icon: 'none'
      })
      return false
    }
    oldHealthDataSave(param)
  } else if (state.checkRulesType == 'blood_sugar') {
    param = {
      report: {
        empi: state.userInfo.empi,
        reportSource: 'MANUAL',
        checkTime: state.time + ':00',
        indicatorKey: 'blood_sugar'
      },
      details: [
        {
          empi: state.userInfo.empi,
          indicatorKey: bloodSugarList[state.bloodSugarActive].value,
          indicatorValue: Number(measurementValue.value.height),
          parentKey: 'blood_sugar'
        }
      ]
    }
    saveReportData(param)
  } else if (state.checkRulesType == 'blood_oxygen') {
    param = {
      empi: state.userInfo.empi,
      spo2: Math.round(Number(measurementValue.value.height)),
      collectTime: state.time + ':00',
      dataSource: 'MANUAL'
    }
    oldHealthDataSave(param)
  } else if (state.checkRulesType == 'water') {
    param = {
      empi: state.userInfo.empi,
      collectTime: parseTime(state.time, '{y}-{m}-{d} {h}:{i}:{s}'),
      dataSource: 'MANUAL',
      paramKey: 'water',
      paramValue: Math.round(Number(measurementValue.value.height))
    }

    newHealthDateSave(param)
  } else if (state.checkRulesType == 'blood_ketone') {
    param = {
      report: {
        empi: state.userInfo.empi,
        reportSource: 'MANUAL',
        checkTime: state.time + ':00',
        indicatorKey: 'blood_ketone'
      },
      details: [
        {
          empi: state.userInfo.empi,
          indicatorKey: 'blood_ketone_data',
          indicatorValue: Number(measurementValue.value.height),
          parentKey: 'blood_ketone'
        }
      ]
    }
    saveReportData(param)
  } else if (state.checkRulesType == 'uric_acid') {
    param = {
      report: {
        empi: state.userInfo.empi,
        reportSource: 'MANUAL',
        checkTime: state.time + ':00',
        indicatorKey: 'uric_acid'
      },
      details: [
        {
          empi: state.userInfo.empi,
          indicatorKey: 'uric_acid_data',
          indicatorValue: Number(measurementValue.value.height),
          parentKey: 'uric_acid'
        }
      ]
    }
    saveReportData(param)
  } else if (state.checkRulesType == 'blood_fat') {
    param = {
      report: {
        empi: state.userInfo.empi,
        reportSource: 'MANUAL',
        checkTime: state.time + ':00',
        indicatorKey: 'blood_fat'
      },
      details: [
        {
          empi: state.userInfo.empi,
          indicatorKey: 'total_cholesterol',
          indicatorValue: Number(measurementValue.value.height),
          parentKey: 'blood_fat'
        },
        {
          empi: state.userInfo.empi,
          indicatorKey: 'tg',
          indicatorValue: Number(measurementValue.value.weight),
          parentKey: 'blood_fat'
        },

        {
          empi: state.userInfo.empi,
          indicatorKey: 'hdlc',
          indicatorValue: Number(measurementValue.value.pulse),
          parentKey: 'blood_fat'
        },
        {
          empi: state.userInfo.empi,
          indicatorKey: 'ldlc',
          indicatorValue: Number(measurementValue.value.fourValue),
          parentKey: 'blood_fat'
        }
      ]
    }
    saveReportData(param)
  } else if (state.checkRulesType == 'liver_function') {
    param = {
      report: {
        empi: state.userInfo.empi,
        reportSource: 'MANUAL',
        checkTime: state.time + ':00',
        indicatorKey: 'liver_function'
      },
      details: [
        {
          empi: state.userInfo.empi,
          indicatorKey: 'got',
          indicatorValue: Number(measurementValue.value.height),
          parentKey: 'liver_function'
        },
        {
          empi: state.userInfo.empi,
          indicatorKey: 'gpt',
          indicatorValue: Number(measurementValue.value.weight),
          parentKey: 'liver_function'
        },

        {
          empi: state.userInfo.empi,
          indicatorKey: 'ygt',
          indicatorValue: Number(measurementValue.value.pulse),
          parentKey: 'liver_function'
        }
      ]
    }
    saveReportData(param)
  }
  return true
}

const sureSleep = () => {
  uni.showLoading({
    title: '加载中'
  })

  if (new Date(state.wakeupDate).getTime() - new Date(state.sleepDate).getTime() <= 0) {
    uni.hideLoading()
    uni.showToast({
      title: '入睡时间需比醒来时间早',
      icon: 'none'
    })
    return false
  }

  if (
    parseFloat(
      timestampToHours(new Date(state.wakeupDate).getTime() - new Date(state.sleepDate).getTime())
    ) > 16
  ) {
    uni.hideLoading()
    uni.showToast({
      title: '入睡时间和醒来时间间隔过长，请重新选择',
      icon: 'none'
    })
    return false
  }

  console.log(state.sleepDate, state.wakeupDate)

  const data = {
    sleepTime: state.sleepDate + ':00',
    weekupTime: state.wakeupDate + ':00',
    sleepDuration: timestampToHours(
      new Date(state.wakeupDate).getTime() - new Date(state.sleepDate).getTime()
    )
  }
  const param = {
    empi: state.userInfo.empi,
    collectTime: parseTime(state.wakeupDate, '{y}-{m}-{d} {h}:{i}:{s}'),
    dataSource: 'MANUAL',
    paramKey: 'sleep',
    paramValue: JSON.stringify(data)
  }

  newHealthDateSave(param)

  return true
}

// 将时间戳转换为小时
const timestampToHours = (timestamp: any) => {
  const differenceInHours = timestamp / (1000 * 60 * 60) // 转换为小时
  // const time = differenceInHours.toFixed(2).split('.')
  // const hour = time[0]
  // if (time[1]) {
  //   return hour + '.' + time[1]
  // } else {
  //   return hour
  // }
  return differenceInHours.toFixed(2)
  // const date = new Date(timestamp) // 创建 Date 对象
  // const hours = date.getHours() // 获取小时
  // const minutes = date.getMinutes() // 获取分钟
  // const hoursStr = hours + (minutes / 60)
  // return hoursStr + ''
}

const oldHealthDataSave = async (param: any) => {
  state.isClick = true
  healthInfoSave(param)
    .then((res) => {
      uni.hideLoading()
      if (res.code == 0) {
        if (res.data == 'true') {
          show.value = false
          showSleep.value = false
          abnormalShow.value = true
        } else {
          uni.showToast({
            title: '提交成功',
            icon: 'none',
            duration: 2000
          })
          setTimeout(() => {
            show.value = false
            showSleep.value = false
            init()
          }, 2000)
        }
      }
    })
    .catch((err) => {
      state.isClick = false
    })
}

// 新指标保存
const newHealthDateSave = (param: any) => {
  saveNewIndicator(param)
    .then((res) => {
      uni.hideLoading()
      if (res.code == 0) {
        if (res.data == true) {
          show.value = false
          showSleep.value = false
          abnormalShow.value = true
        } else {
          uni.showToast({
            title: '提交成功',
            icon: 'none',
            duration: 1500
          })
          setTimeout(() => {
            show.value = false
            showSleep.value = false
            init()
          }, 2000)
        }
      }
    })
    .catch((err) => {
      state.isClick = false
    })
}

// 保存报告
const saveReportData = (param: any) => {
  saveReport(param)
    .then((res) => {
      uni.hideLoading()
      if (res.code == 0) {
        if (res.data == 'true') {
          show.value = false
          showSleep.value = false
          abnormalShow.value = true
        } else {
          uni.showToast({
            title: '提交成功',
            icon: 'none',
            duration: 1500
          })
          setTimeout(() => {
            show.value = false
            showSleep.value = false
            init()
          }, 2000)
        }
      }
    })
    .catch((err) => {
      state.isClick = false
    })
}

const knowFun = (val: string) => {
  switch (val) {
    case 'blood_sugar':
      uni.navigateTo({
        url: '/module/src/pages/healthPortrait/detail/bloodSugar'
      })
      return
    case 'blood_oxygen':
      uni.navigateTo({
        url: '/module/src/pages/healthPortrait/detail/bloodOxygen'
      })
      return
    case 'blood_ketone':
      uni.navigateTo({
        url: '/module/src/pages/healthPortrait/detail/bloodKetone'
      })
      return
    case 'uric_acid':
      uni.navigateTo({
        url: '/module/src/pages/healthPortrait/detail/uricAcid'
      })
      return
    case 'sleep':
      uni.navigateTo({
        url: '/module/src/pages/healthPortrait/detail/sleep'
      })
      return
    case 'water':
      uni.navigateTo({
        url: '/module/src/pages/healthPortrait/detail/water'
      })
      return
    case 'blood_fat':
      uni.navigateTo({
        url: '/module/src/pages/healthPortrait/detail/bloodFat'
      })
      return
    case 'liver_function':
      uni.navigateTo({
        url: '/module/src/pages/healthPortrait/detail/liverFunction'
      })
      return
    default:
      uni.navigateTo({
        url: '/module/src/pages/healthPortrait/detail?type=' + val
      })
      return
  }
}
const detailFun = (name) => {
  uni.navigateTo({
    url: '/module/src/pages/healthPortrait/healthDataRecord?type=' + name
  })
}
const timeFun = () => {
  show.value = false
  state.tabkeyboardShow = false
  dateShow.value = true
  state.datetime = state.time ? new Date(state.time).getTime() : ''
}

const timeSleepFun = (date: any, type: string) => {
  sleepTimeType.value = type
  showSleep.value = false
  state.tabkeyboardShow = false
  dateSleepShow.value = true
  // state.datetime = parseTime(date, '{y}-{m}-{d} {h}:{i}')
  state.datetime = new Date(date).getTime()
}

// sleep
const closeSleepDateTime = () => {
  showSleep.value = true
  state.tabkeyboardShow = true
  dateSleepShow.value = false
}
const confirmSleepDateTime = () => {
  showSleep.value = true
  dateSleepShow.value = false
  if (state.datetimeNew) {
    if (sleepTimeType.value == 'sleep') {
      state.sleepDate = state.datetimeNew.replace(/\//g, '-')
    } else {
      state.wakeupDate = state.datetimeNew.replace(/\//g, '-')
    }
  } else {
    if (sleepTimeType.value == 'sleep') {
      state.sleepDate = parseTime(new Date().getTime(), '{y}-{m}-{d} {h}:{i}').replace(/\//g, '-')
    } else {
      state.wakeupDate = parseTime(new Date().getTime(), '{y}-{m}-{d} {h}:{i}').replace(/\//g, '-')
    }
  }
}
const changeSleepFun = (item) => {
  const data = parseTime(new Date(item.value).getTime(), '{y}-{m}-{d} {h}:{i}')
  state.datetimeNew = data
}
//

const closeDateTime = () => {
  show.value = true
  state.tabkeyboardShow = true
  if (state.slideRuleShow == true) {
    state.slideRuleShow = !state.slideRuleShow
    setTimeout(() => {
      state.slideRuleShow = !state.slideRuleShow
    }, 20)
  }
  dateShow.value = false
}
const confirmDateTime = () => {
  show.value = true
  dateShow.value = false
  if (state.slideRuleShow == true) {
    state.slideRuleShow = !state.slideRuleShow
    setTimeout(() => {
      state.slideRuleShow = !state.slideRuleShow
    }, 20)
  }
  if (state.datetimeNew) {
    state.time = state.datetimeNew.replace(/\//g, '-')
  } else {
    state.time = parseTime(new Date().getTime(), '{y}-{m}-{d} {h}:{i}').replace(/\//g, '-')
  }
}
const changeFun = (item) => {
  const data = parseTime(new Date(item.value).getTime(), '{y}-{m}-{d} {h}:{i}')
  state.datetimeNew = data
}

const measuremenKey = (value) => {
  state.tabkeyboardShow = !state.tabkeyboardShow
  state.slideRuleShow = !state.slideRuleShow
  state.slideRuleType = value
  state.slideRuleTypeDefault = true
  if (value == 'slideRule') {
    if (state.checkRulesType == 'BMI') {
      if (Number(measurementValue.value.height) <= 250) {
        message.value.currentScore = Math.round(Number(measurementValue.value.height))
        measurementValue.value.height = Math.round(Number(measurementValue.value.height))
      } else {
        message.value.currentScore = 250
        measurementValue.value.height = 250
      }
      if (Number(measurementValue.value.weight) <= 200) {
        messageWeight.value.currentScore = Math.round(Number(measurementValue.value.weight))
        measurementValue.value.weight = Math.round(Number(measurementValue.value.weight))
      } else {
        messageWeight.value.currentScore = 200
        measurementValue.value.weight = 200
      }
    } else if (state.checkRulesType == 'whr') {
      if (Number(measurementValue.value.height) <= 200) {
        message.value.currentScore = Math.round(Number(measurementValue.value.height))
        measurementValue.value.height = Math.round(Number(measurementValue.value.height))
      } else {
        message.value.currentScore = 200
        measurementValue.value.height = 200
      }
      if (Number(measurementValue.value.weight) <= 200) {
        messageWeight.value.currentScore = Math.round(Number(measurementValue.value.weight))
        measurementValue.value.weight = Math.round(Number(measurementValue.value.weight))
      } else {
        messageWeight.value.currentScore = 200
        measurementValue.value.weight = 200
      }
    } else if (state.checkRulesType == 'heart') {
      if (Number(measurementValue.value.height) <= 180) {
        message.value.currentScore = Math.round(Number(measurementValue.value.height))
        measurementValue.value.height = Math.round(Number(measurementValue.value.height))
      } else {
        message.value.currentScore = 180
        measurementValue.value.height = 180
      }
    } else if (state.checkRulesType == 'blood_pressure') {
      if (Number(measurementValue.value.height) <= 300) {
        message.value.currentScore = Math.round(Number(measurementValue.value.height))
        measurementValue.value.height = Math.round(Number(measurementValue.value.height))
      } else {
        message.value.currentScore = 300
        measurementValue.value.height = 300
      }
      if (Number(measurementValue.value.weight) <= 300) {
        messageWeight.value.currentScore = Number(measurementValue.value.weight)
        measurementValue.value.weight = Number(measurementValue.value.weight)
      } else {
        messageWeight.value.currentScore = 300
        measurementValue.value.weight = 300
      }
      if (Number(measurementValue.value.pulse) <= 180) {
        messageThree.value.currentScore = Number(measurementValue.value.pulse)
        measurementValue.value.pulse = Number(measurementValue.value.pulse)
      } else {
        messageThree.value.currentScore = 180
        measurementValue.value.pulse = 180
      }
    } else if (state.checkRulesType == 'blood_sugar') {
      if (Number(measurementValue.value.height) <= 30) {
        message.value.currentScore = Number(measurementValue.value.height)
        measurementValue.value.height = Number(measurementValue.value.height)
      } else {
        message.value.currentScore = 30
        measurementValue.value.height = 30
      }
    } else if (state.checkRulesType == 'blood_oxygen') {
      if (Number(measurementValue.value.height) <= 100) {
        message.value.currentScore = Math.round(Number(measurementValue.value.height))
        measurementValue.value.height = Math.round(Number(measurementValue.value.height))
      } else {
        message.value.currentScore = 100
        measurementValue.value.height = 100
      }
    } else if (state.checkRulesType == 'water') {
      if (Number(measurementValue.value.height) <= 4000) {
        message.value.currentScore = Math.round(Number(measurementValue.value.height))
        measurementValue.value.height = Math.round(Number(measurementValue.value.height))
      } else {
        message.value.currentScore = 4000
        measurementValue.value.height = 4000
      }
    } else if (state.checkRulesType == 'blood_ketone') {
      if (Number(measurementValue.value.height) <= 4) {
        message.value.currentScore = Number(measurementValue.value.height)
        measurementValue.value.height = Number(measurementValue.value.height)
      } else {
        message.value.currentScore = 4
        measurementValue.value.height = 4
      }
    } else if (state.checkRulesType == 'uric_acid') {
      if (Number(measurementValue.value.height) <= 600) {
        message.value.currentScore = Number(measurementValue.value.height)
        measurementValue.value.height = Number(measurementValue.value.height)
      } else {
        message.value.currentScore = 600
        measurementValue.value.height = 600
      }
    } else if (state.checkRulesType == 'blood_fat') {
      if (Number(measurementValue.value.height) <= 6) {
        message.value.currentScore = Number(measurementValue.value.height)
        measurementValue.value.height = Number(measurementValue.value.height)
      } else {
        message.value.currentScore = 6.0
        measurementValue.value.height = 6.0
      }

      if (Number(measurementValue.value.weight) <= 3.0) {
        messageWeight.value.currentScore = Number(measurementValue.value.weight)
        measurementValue.value.weight = Number(measurementValue.value.weight)
      } else {
        messageWeight.value.currentScore = 3.0
        measurementValue.value.weight = 3.0
      }

      if (Number(measurementValue.value.pulse) <= 3.0) {
        messageThree.value.currentScore = Number(measurementValue.value.pulse)
        measurementValue.value.pulse = Number(measurementValue.value.pulse)
      } else {
        messageThree.value.currentScore = 3.0
        measurementValue.value.pulse = 3.0
      }

      if (Number(measurementValue.value.fourValue) <= 5.0) {
        messageFour.value.currentScore = Number(measurementValue.value.fourValue)
        measurementValue.value.fourValue = Number(measurementValue.value.fourValue)
      } else {
        messageFour.value.currentScore = 5.0
        measurementValue.value.fourValue = 5.0
      }
    } else if (state.checkRulesType == 'liver_function') {
      if (Number(measurementValue.value.height) <= 60) {
        message.value.currentScore = Number(measurementValue.value.height)
        measurementValue.value.height = Number(measurementValue.value.height)
      } else {
        message.value.currentScore = 60
        measurementValue.value.height = 60
      }
      if (Number(measurementValue.value.weight) <= 60) {
        messageWeight.value.currentScore = Number(measurementValue.value.weight)
        measurementValue.value.weight = Number(measurementValue.value.weight)
      } else {
        messageWeight.value.currentScore = 60
        measurementValue.value.weight = 60
      }

      if (Number(measurementValue.value.pulse) <= 60) {
        messageThree.value.currentScore = Number(measurementValue.value.pulse)
        measurementValue.value.pulse = Number(measurementValue.value.pulse)
      } else {
        messageThree.value.currentScore = 60
        measurementValue.value.pulse = 60
      }
    }
  } else if (value == 'keyboard') {
    if (state.checkRulesType == 'blood_sugar') {
      if (Number(measurementValue.value.height) <= 30) {
        measurementValue.value.height = Number(measurementValue.value.height)
      } else {
        measurementValue.value.height = 30
      }
    } else if (state.checkRulesType == 'water') {
      if (Number(measurementValue.value.height) <= 4000) {
        measurementValue.value.height = Number(measurementValue.value.height)
      } else {
        measurementValue.value.height = 4000
      }
    } else if (state.checkRulesType == 'blood_ketone') {
      if (Number(measurementValue.value.height) <= 4) {
        measurementValue.value.height = Number(measurementValue.value.height)
      } else {
        measurementValue.value.height = 4
      }
    } else if (state.checkRulesType == 'uric_acid') {
      if (Number(measurementValue.value.height) <= 600) {
        measurementValue.value.height = Number(measurementValue.value.height)
      } else {
        measurementValue.value.height = 600
      }
    } else if (state.checkRulesType == 'blood_fat') {
      if (Number(measurementValue.value.height) <= 6) {
        message.value.currentScore = Number(measurementValue.value.height)
        measurementValue.value.height = Number(measurementValue.value.height)
      } else {
        message.value.currentScore = 6.0
        measurementValue.value.height = 6.0
      }

      if (Number(measurementValue.value.weight) <= 3.0) {
        messageWeight.value.currentScore = Number(measurementValue.value.weight)
        measurementValue.value.weight = Number(measurementValue.value.weight)
      } else {
        messageWeight.value.currentScore = 3.0
        measurementValue.value.weight = 3.0
      }

      if (Number(measurementValue.value.pulse) <= 3.0) {
        messageThree.value.currentScore = Number(measurementValue.value.pulse)
        measurementValue.value.pulse = Number(measurementValue.value.pulse)
      } else {
        messageThree.value.currentScore = 3.0
        measurementValue.value.pulse = 3.0
      }

      if (Number(measurementValue.value.fourValue) <= 5.0) {
        messageFour.value.currentScore = Number(measurementValue.value.fourValue)
        measurementValue.value.fourValue = Number(measurementValue.value.fourValue)
      } else {
        messageFour.value.currentScore = 5.0
        measurementValue.value.fourValue = 5.0
      }
    } else if (state.checkRulesType == 'liver_function') {
      if (Number(measurementValue.value.height) <= 60) {
        message.value.currentScore = Number(measurementValue.value.height)
        measurementValue.value.height = Number(measurementValue.value.height)
      } else {
        message.value.currentScore = 60
        measurementValue.value.height = 60
      }
      if (Number(measurementValue.value.weight) <= 60) {
        messageWeight.value.currentScore = Number(measurementValue.value.weight)
        measurementValue.value.weight = Number(measurementValue.value.weight)
      } else {
        messageWeight.value.currentScore = 60
        measurementValue.value.weight = 60
      }

      if (Number(measurementValue.value.pulse) <= 60) {
        messageThree.value.currentScore = Number(measurementValue.value.pulse)
        measurementValue.value.pulse = Number(measurementValue.value.pulse)
      } else {
        messageThree.value.currentScore = 60
        measurementValue.value.pulse = 60
      }
    }
  }
}
const measurementFun = () => {
  if (
    state.checkRulesType == 'BMI' ||
    state.checkRulesType == 'blood_pressure' ||
    state.checkRulesType == 'blood_sugar'
  ) {
    measurementShow.value = true
    show.value = false
    showSleep.value = false
  }
}
const goit = () => {
  measurementShow.value = false
  if (state.slideRuleShow == true) {
    state.slideRuleShow = !state.slideRuleShow
    setTimeout(() => {
      state.slideRuleShow = !state.slideRuleShow
    }, 20)
  }
  show.value = true
}
const bloodSugarTab = (item, index) => {
  state.bloodSugarActive = index
}
const childEvent = (param) => {
  if (
    param &&
    (param.name == '身高' ||
      param.name == '腰围' ||
      param.name == '收缩压' ||
      param.name == '心率' ||
      param.name == '总胆固醇' ||
      param.name == '谷草转氨酶')
  ) {
    measurementValue.value.height = param.currentSwiper
    message.value.currentScore = param.currentSwiper
  } else if (
    param &&
    (param.name == '体重' ||
      param.name == '臀围' ||
      param.name == '舒张压' ||
      param.name == '甘油三酯' ||
      param.name == '谷丙转氨酶')
  ) {
    measurementValue.value.weight = param.currentSwiper
    messageWeight.value.currentScore = param.currentSwiper
  } else if (
    (param && param.name == '脉搏') ||
    param.name == '高密度脂蛋白' ||
    param.name == 'Y-谷氨酰转肽酶'
  ) {
    measurementValue.value.pulse = param.currentSwiper
    messageThree.value.currentScore = param.currentSwiper
  } else if (param && param.name == '血糖') {
    measurementValue.value.height = param.currentSwiper
    message.value.currentScore = param.currentSwiper
  } else if (param && param.name == '血氧饱和度') {
    measurementValue.value.height = param.currentSwiper
    message.value.currentScore = param.currentSwiper
  } else if (param && param.name == '饮水') {
    measurementValue.value.height = param.currentSwiper
    message.value.currentScore = param.currentSwiper
  } else if (param && param.name == '血酮') {
    measurementValue.value.height = param.currentSwiper
    message.value.currentScore = param.currentSwiper
  } else if (param && param.name == '尿酸') {
    measurementValue.value.height = param.currentSwiper
    message.value.currentScore = param.currentSwiper
  } else if (param && param.name == '低密度脂蛋白') {
    measurementValue.value.fourValue = param.currentSwiper
    messageFour.value.currentScore = param.currentSwiper
  }
}
const abnormalClose = () => {
  abnormalShow.value = false
  init()
}

// 血糖-- 根据当前时间匹配时间段标签
const getBloodSugarTime = () => {
  const date = new Date()
  const times = date.getTime()
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()

  switch (true) {
    case times >= getTimestamp(year, month, day) &&
      times <= getTimestamp(year, month, day, 7, 59, 59):
      state.bloodSugarActive = 0
      break
    case times >= getTimestamp(year, month, day, 8, 0, 0) &&
      times <= getTimestamp(year, month, day, 9, 59, 59):
      state.bloodSugarActive = 1
      break
    case times >= getTimestamp(year, month, day, 10, 0, 0) &&
      times <= getTimestamp(year, month, day, 11, 59, 59):
      state.bloodSugarActive = 2
      break
    case times >= getTimestamp(year, month, day, 12, 0, 0) &&
      times <= getTimestamp(year, month, day, 14, 59, 59):
      state.bloodSugarActive = 3
      break
    case times >= getTimestamp(year, month, day, 15, 0, 0) &&
      times <= getTimestamp(year, month, day, 17, 59, 59):
      state.bloodSugarActive = 4
      break
    case times >= getTimestamp(year, month, day, 18, 0, 0) &&
      times <= getTimestamp(year, month, day, 20, 59, 59):
      state.bloodSugarActive = 5
      break
    case times >= getTimestamp(year, month, day, 21, 0, 0) &&
      times <= getTimestamp(year, month, day, 23, 59, 59):
      state.bloodSugarActive = 6
      break
    default:
      state.bloodSugarActive = 0
      break
  }

  if (state.bloodSugarActive > 4) {
    scrollLeft = '440rpx'
  } else {
    scrollLeft = '0rpx'
  }
}

const getTimestamp = (year: any, month: any, day: any, hour = 0, minute = 0, second = 0) => {
  const date = new Date(year, month - 1, day, hour, minute, second)
  return date.getTime()
}
</script>

<style lang="scss" scoped>
.cf {
  zoom: 1;
}

.cf::after {
  display: block;
  height: 0;
  clear: both;
  font-size: 0;
  visibility: hidden;
  content: '.';
}

.wrap {
  min-height: 100vh;
  padding-bottom: 32rpx;

  .healthWrap {
    display: inline-block;
    width: calc(100% - 64rpx);
    height: 100%;
    margin: 0rpx 32rpx;
    overflow: auto;

    .listWrap {
      margin: 32rpx 0rpx 0;
      overflow: hidden;
      background: #f5f5f5;
      border-radius: 16rpx;

      .header {
        display: flex;
        padding: 32rpx;
        background: #fff;
        border-bottom: 1rpx solid #e5e6eb;
        border-top-left-radius: 16rpx;
        border-top-right-radius: 16rpx;

        .left {
          display: inline-block;
          font-size: 96rpx;
          vertical-align: top;
          width: 96rpx;
          height: 96rpx;
        }

        .right {
          display: inline-block;
          width: calc(100% - 126rpx);
          margin-left: 30rpx;
          vertical-align: top;

          .top {
            position: relative;
            font-size: 26rpx;
            color: #999;

            .name {
              display: inline-block;
              font-size: 32rpx;
              font-weight: 600;
              color: #333;
              vertical-align: middle;
            }

            .status {
              display: inline-block;
              padding: 4rpx 20rpx;
              margin-left: 20rpx;
              font-weight: 600;
              color: #ff503d;
              vertical-align: middle;
              background: rgb(255 80 61 / 10%);
              border-radius: 4rpx;

              &.red {
                color: #ff503d;
                background: rgb(255 80 61 / 10%);
              }

              &.yellow {
                color: #ffd666;
                background: rgb(255 214 102 / 10%);
              }

              &.orange {
                color: #ff813c;
                background: rgb(255 129 60 / 10%);
              }

              &.green {
                color: #0cb67c;
                background: rgb(12 182 124 / 10%);
              }
            }

            .time {
              position: absolute;
              top: 50%;
              right: 0;
              transform: translateY(-50%);
            }
          }

          p {
            position: relative;
            font-size: 26rpx;
            color: #999;

            &:nth-child(1) {
              span {
                display: inline-block;
                vertical-align: middle;

                &:nth-child(1) {
                  font-size: 32rpx;
                  font-weight: 700;
                  color: #333;
                }

                &.status {
                  padding: 4rpx 20rpx;
                  margin-left: 20rpx;
                  color: #ff503d;
                  background: rgb(255 80 61 / 10%);
                  border-radius: 4rpx;

                  &.red {
                    color: #ff503d;
                    background: rgb(255 80 61 / 10%);
                  }

                  &.yellow {
                    color: #ff813c;
                    background: rgb(255 129 60 / 10%);
                  }

                  &.green {
                    color: #0cb67c;
                    background: rgb(12 182 124 / 10%);
                  }
                }

                &.postprandial {
                  padding: 4rpx 20rpx;
                  margin-left: 20rpx;
                  font-size: 24rpx;
                  background: #f5f5f5;
                  border-radius: 20rpx 4rpx;
                }

                &.time {
                  position: absolute;
                  top: 50%;
                  right: 0;
                  transform: translateY(-50%);
                }
              }
            }

            &:nth-child(2) {
              margin-top: 30rpx;

              span {
                display: inline-block;
                font-size: 28rpx;
                color: #999;
                vertical-align: middle;

                &:nth-child(1) {
                  margin-right: 20rpx;
                  font-size: 40rpx;
                  color: #333;

                  &.no {
                    font-size: 26rpx;
                    color: #999;
                  }

                  i {
                    font-style: normal;
                  }
                }

                &.checkaBnormal {
                  padding: 4rpx 20rpx;
                  margin-left: 20rpx;
                  font-size: 24rpx;
                  border: 1rpx solid #ccc;
                  border-radius: 4rpx;

                  &.red {
                    color: #ff503d;
                    background: rgb(255 80 61 / 10%);
                    border: 1rpx solid #ff503d;
                  }

                  &.yellow {
                    color: #ff813c;
                    background: rgb(255 129 60 / 10%);
                    border: 1rpx solid #ff813c;
                  }

                  &.green {
                    color: #0cb67c;
                    background: rgb(12 182 124 / 10%);
                    border: 1rpx solid #0cb67c;
                  }
                }

                &.postprandial {
                  padding: 4rpx 20rpx;
                  margin-left: 20rpx;
                  font-size: 24rpx;
                  color: #666;
                  background: #f5f5f5;
                  border-radius: 20rpx 4rpx;
                }
              }

              .addImg {
                position: absolute;
                top: 50%;
                right: 0;
                width: 64rpx;
                transform: translateY(-50%);
              }
            }
          }
        }

        .min {
          position: relative;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          margin-top: 24rpx;
          font-size: 28rpx;
          color: #999;

          .nodata {
            margin-right: 20rpx;
          }

          .num {
            display: inline-block;
            vertical-align: middle;
          }

          .name {
            margin-right: 20rpx;
            font-size: 40rpx;
            font-weight: 600;
            color: #222;
          }

          .postprandial {
            padding: 4rpx 20rpx;
            margin-left: 20rpx;
            font-size: 24rpx;
            color: #666;
            background: #f5f5f5;
            border-radius: 20rpx 4rpx;
          }

          .add {
            // position: absolute;
            // top: 50%;
            // right: 0;
            display: block;
            font-size: 64rpx;
            color: #00d1b6;
            width: 64rpx;
            height: 64rpx;
            // transform: translateY(-50%);
          }
        }
      }

      .checkMore {
        background: #fff;

        .item {
          position: relative;
          display: inline-block;
          width: 50%;
          padding: 28rpx 0;
          font-size: 28rpx;
          color: #666;
          text-align: center;
          vertical-align: middle;

          .name,
          .quota {
            display: inline-block;
            vertical-align: middle;
          }

          .img {
            display: inline-block;
            width: 32rpx;
            height: 32rpx;
            vertical-align: middle;
          }

          .border {
            position: absolute;
            right: 0;
            height: 32rpx;
            border-right: 1rpx solid #ccc;
          }
        }
      }
    }
  }

  ::v-deep .u-popup {
    .u-popup__content {
      overflow: hidden;

      .abnormalContent {
        width: 80vw;

        .title {
          padding: 40rpx 32rpx 0;
          font-size: 34rpx;
          font-weight: 700;
          color: #1d2129;
          text-align: center;
        }

        .content {
          display: block;
          padding: 15rpx 32rpx 40rpx;
          font-size: 30rpx;
          color: #4e5969;
          text-align: center;
          border-bottom: 2rpx solid #e5e6eb;
        }

        .know {
          height: 88rpx;
          font-size: 32rpx;
          line-height: 88rpx;
          color: #00d1b6;
          text-align: center;
        }
      }
    }

    .popup-wrap {
      padding-bottom: calc(140rpx + constant(safe-area-inset-bottom));
      padding-bottom: calc(140rpx + env(safe-area-inset-bottom));

      .title {
        padding: 32rpx;
        font-size: 32rpx;
        font-weight: 700;
        text-align: center;
        border-bottom: 1rpx solid #e5e6eb;
      }

      .popupContent {
        padding: 32rpx;
        font-size: 30rpx;
        color: #222;
      }

      .tabKey {
        position: relative;
        padding: 20rpx 30rpx 30rpx;

        .name {
          font-size: 30rpx;
          font-weight: 700;
          color: #00d1b6;

          &.on {
            color: #fff;
          }
        }

        .keyboard {
          position: absolute;
          top: 50%;
          right: 30rpx;
          transform: translateY(-50%);

          .img {
            display: inline-block;
            font-size: 36rpx;
            color: #999;
            vertical-align: middle;
            width: 36rpx;
            height: 36rpx;
          }

          .key {
            display: inline-block;
            margin-left: 10rpx;
            font-size: 28rpx;
            color: #222;
            vertical-align: middle;
          }
        }
      }

      .listWraps {
        width: calc(100% - 32rpx);
        height: 118rpx;
        margin: 32rpx 0rpx 0 32rpx;
        // display: flex;
        // flex-direction: row;
        // align-items: center;
        // justify-content: space-between;

        .scroll-view_H {
          width: 100%;
          white-space: nowrap;
        }

        .item {
          display: inline-block;
          // display: flex;
          width: 112rpx;
          height: 110rpx;
          margin-right: 16rpx;
          text-align: center;
          background: #fafafa;
          border-radius: 12rpx;

          // &:nth-last-child(1) {
          //   margin-right: 0;
          // }

          .name {
            display: block;
            width: 100%;
            margin: 10rpx 0 8rpx;
            font-size: 28rpx;
            font-weight: 600;
            color: #333;
            text-align: center;

            // &:nth-child(1) {
            //   display: block;
            //   font-size: 20rpx;
            //   font-weight: 700;
            //   color: #333;
            // }
          }

          .time-title {
            display: block;
            width: 100%;
            font-size: 26rpx;
            font-weight: 400;
            color: #666;
            text-align: center;
          }

          &.on {
            background: #00d1b6;

            .name {
              color: #fff;
            }

            .time-title {
              color: #fff;
            }

            // &::after {
            //   position: absolute;
            //   bottom: -8rpx;
            //   left: 50%;
            //   width: 0;
            //   height: 0;
            //   content: '';
            //   border-top: 10rpx solid #00d1b6;
            //   border-right: 10rpx solid transparent;
            //   border-left: 10rpx solid transparent;
            //   transform: translateX(-50%);
            // }
          }
        }
      }

      .btn {
        height: 88rpx;
        margin: 0 32rpx;
        font-size: 32rpx;
        font-weight: 700;
        line-height: 88rpx;
        color: #fff;
        text-align: center;
        background: #00d1b6;
        border-radius: 44rpx;
      }

      .fixedBtn {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 24rpx 0;
        padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
        padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
        color: #fff;
        text-align: center;
        background: #fff;
        // border-top: 1rpx solid #e5e6eb;

        .name {
          display: inline-block;
          width: calc(100% - 60rpx);
          padding: 22rpx 0;
          margin: 0 30rpx;
          font-size: 32rpx;
          font-weight: 600;
          background: #00d1b6;
          border-radius: 50rpx;
        }
      }

      .measure {
        display: inline-block;
        width: 100%;
        padding-bottom: 30rpx;
        background: #fff;

        .numWrap {
          display: flex;
          flex-flow: row wrap;
          align-items: center;
          justify-content: center;
          // grid-template-columns: repeat(2, 1fr);
          margin: 20rpx 30rpx 0;
          background: #fafafa;
          border-radius: 4rpx;

          .item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 50%;
            height: 200rpx;
            padding: 10rpx 0 0rpx;

            .value {
              display: block;
              width: 100%;
              padding: 20rpx 0 8rpx;
              font-size: 48rpx;
              color: #00d1b6;
              text-align: center;
              background: #fafafa;
              border: 0;
            }

            .wraps {
              padding: 10rpx 0;
              margin: 0 20rpx;
              font-size: 30rpx;
              color: #00d1b6;
              text-align: center;
              border-top: 1rpx solid #00d1b6;

              .name {
                display: inline-block;
                vertical-align: middle;

                &:nth-child(1) {
                  margin-right: 8rpx;
                }
              }
            }
          }
        }
      }

      .measureTime {
        position: relative;
        display: flex;
        justify-content: space-between;
        padding: 32rpx 0;
        margin: 0 32rpx;

        .name {
          font-size: 30rpx;
          font-weight: 700;
          color: #222;
        }

        .time {
          min-width: 200rpx;
          font-size: 30rpx;
          font-weight: 400;
          color: #222;
          text-align: right;

          .titles {
            display: inline-block;
            vertical-align: middle;
          }

          .img {
            display: inline-block;
            width: 30rpx;
            height: 30rpx;
            vertical-align: middle;
          }
        }
      }

      .sleepTime {
        padding: 32rpx;
        margin-bottom: 24rpx;
        background: #fafafa;
        border: 1rpx solid #e5e6eb;
        border-radius: 16rpx;
      }

      .measureDetail {
        margin: 0 32rpx;
        font-size: 26rpx;
        color: #999;

        .item {
          display: block;

          &:nth-child(2) {
            margin-top: 10rpx;
          }
        }
      }

      .content {
        position: relative;

        .contentWrap {
          margin: 0 32rpx;

          .contentItem {
            margin-top: 32rpx;
            font-size: 32rpx;
            color: #222;
          }

          .img {
            display: block;
            width: 100%;
            height: auto;
            margin-top: 30rpx;
          }
        }

        .fixedBtn {
          position: fixed;
          bottom: 0;
          left: 0;
          width: 100%;
          padding: 24rpx 0;
          padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
          padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
          color: #fff;
          text-align: center;
          background: #fff;
          border-top: 1rpx solid #fff;

          p {
            padding: 22rpx 0;
            margin: 0 30rpx;
            font-size: 32rpx;
            background: #02bcc3;
            border-radius: 50rpx;
          }
        }
      }
    }

    .u-popup__content__close {
      top: 40rpx;

      .uicon-close {
        font-size: 32rpx !important;
        line-height: 32rpx !important;
      }
    }
  }

  ::v-deep
    .u-popup
    .u-slide-up-enter-to
    .u-picker
    .u-picker__view__column
    .u-picker__view__column__item {
    line-height: 34px !important;
  }

  ::v-deep .u-popup .u-slide-up-enter-active {
    overflow: hidden;
    border-top-left-radius: 32rpx !important;
    border-top-right-radius: 32rpx !important;

    .u-toolbar {
      .u-toolbar__wrapper__confirm {
        color: #00d1b6 !important;
      }
    }
  }

  ::v-deep .u-popup .u-slide-up-enter-to .u-picker .u-picker__view {
    height: 400px !important;
  }

  ::v-deep .u-safe-area-inset-bottom {
    padding-bottom: 0 !important;
  }
}

.report-detail {
  font-size: 28rpx;
  font-weight: 500;
  color: #222;
}
</style>
